Differenza tra display: inline-flex e display: flex

142

Ho difficoltà a comprendere la proprietà display:inline-flex;. Qual è la differenza tra display:inline-flex; e display:flex;?Differenza tra display: inline-flex e display: flex

Sto provando ad allineare verticalmente alcuni elementi all'interno del wrapper ID. Ecco perché ho dato la proprietà display:inline-flex; a questo ID; perché il wrapper ID è il contenitore flessibile.

Ma non c'è alcuna differenza nella presentazione. Mi aspettavo che tutto nell'ID wrapper venisse visualizzato inline.

#wrapper { 
 
    display: inline-flex; 
 
    /*no difference to display:flex; */ 
 
}

<body> 
 
    <div id="wrapper"> 
 
     <header>header</header> 
 
     <nav>nav</nav> 
 
     <aside>aside</aside> 
 
     <main>main</main> 
 
     <footer>footer</footer> 
 
    </div> 
 
</body>

JSFiddle Example

Qual è la differenza?

fonte

2014-12-11 astridx

OP, si prega di indicare uno della risposta fornita come * accettato * facendo clic sul segno di spunta sulla lato sinistro della risposta. – domsson

181

display: inline-flex non rende elementi flessibili visualizzazione in linea. Rende in linea il contenitore flessibile . Questa è l'unica differenza tra display: inline-flex e display: flex. Un confronto simile può essere effettuato tra display: inline-block e display: block e pretty much any other display type that has an inline counterpart.

Non vi è alcuna differenza nell'effetto sugli articoli flessibili; il layout flessibile è identico sia che il contenitore flessibile sia a livello di blocco o in linea. In particolare, gli stessi elementi flessibili si comportano sempre come caselle a livello di blocco (sebbene abbiano alcune proprietà di blocchi inline). Non è possibile visualizzare gli elementi flessibili in linea; altrimenti non hai un layout flessibile.

Non è chiaro cosa si intenda esattamente per "allineare verticalmente" o perché esattamente si desidera visualizzare i contenuti in linea, ma sospetto che Flexbox non sia lo strumento giusto per qualsiasi cosa si stia tentando di realizzare. È probabile che ciò che stai cercando sia semplicemente un vecchio layout in linea (display: inline e/o display: inline-block), per il quale il flexbox è non una sostituzione; flexbox è non la soluzione di layout universale che tutti sostengono che è (sto affermando questo perché l'idea sbagliata è probabilmente il motivo per cui stai considerando Flexbox in primo luogo).

Le differenze tra layout di blocco e layout in linea non rientrano nell'ambito di questa domanda, ma quella che si distingue maggiormente è la larghezza automatica: le caselle a livello di blocco si estendono orizzontalmente per riempire il blocco contenente, mentre le caselle a livello interno si restringono per adattarsi ai loro contenuti. Infatti, solo per questo motivo non utilizzerai quasi mai lo display: inline-flex a meno che tu non abbia una buona ragione per mostrare il tuo contenitore flessibile in linea.

fonte

2014-12-13 13:08:19 BoltClock

avanzato violino demo per differenziare 'inline-flex' e' flex': http://jsfiddle.net/mgr0en3q/1/ violino originale di @ pesce-grafica e @astridx –

Avete bisogno di ulteriori informazioni in modo che il browser sappia cosa volete. Ad esempio, ai bambini del contenitore deve essere detto "come" flettere.

Updated Fiddle

Ho aggiunto #wrapper > * { flex: 1; margin: auto; } al vostro CSS e cambiato inline-flex-flex, e si può vedere come gli elementi ora spazio se stessi in modo uniforme sulla pagina.

fonte

2014-12-11 18:22:03

Grazie per la tua risposta, ma sapevo che avrei potuto farlo in questo modo. Ho solo frainteso la visualizzazione della proprietà: inline-flex; - Ho pensato che questa proprietà è un modo più semplice per raggiungere il mio obiettivo. Ma tra gli ultimi giorni ho appreso che questa proprietà rende solo il display del contenitore in linea. Con uno sfondo aggiunto, vedo ora la differenza tra la visualizzazione delle proprietà: inline-flex; e display: flex; a un flexbox. http://jsfiddle.net/vUSmV/101 – astridx

flex e inline-flex entrambi applicano layout flessibile ai bambini del contenitore.Il contenitore con display:flex si comporta come un elemento a livello di blocco stesso, mentre display:inline-flex fa sì che il contenitore si comporti come un elemento in linea.

fonte

2014-12-13 13:17:31 Leo

la differenza tra "flex" e "inline-flex"

Risposta breve:

Uno è in linea e l'altra risponde fondamentalmente come un elemento di blocco (ma ha alcune delle essa la propria le differenze).

Più rispondere:

Inline-Flex - La versione in linea di Flex permette all'elemento, ed è figli, di avere proprietà di flessione pur rimanendo nel flusso regolare del documento/pagina web. In sostanza, puoi posizionare due contenitori flex in linea nella stessa riga, se le larghezze fossero abbastanza piccole, senza eccessi di stile per consentire loro di esistere nella stessa riga. Questo è molto simile a "inline-block".

Flex: il contenitore e i suoi bambini hanno proprietà flessibili, ma il contenitore si riserva la riga, poiché viene tolto dal normale flusso del documento. Risponde come un elemento di blocco, in termini di flusso di documenti. Due contenitori Flexbox non potrebbero esistere sulla stessa fila senza eccessi di styling.

Il problema si potrebbe avere

causa gli elementi che hai elencato nel tuo esempio, se sto indovinando, penso che si desidera utilizzare Flex per visualizzare gli elementi elencati in un ancora-by-fila fila alla moda ma continua a vedere gli elementi fianco a fianco.

Il motivo per cui è probabile che si verifichino problemi è dovuto al fatto che flex e inline-flex hanno la proprietà "flex-direction" predefinita impostata su "row". Questo mostrerà i bambini affiancati. La modifica di questa proprietà in "colonna" consentirà ai tuoi elementi di impilare e riservare spazio (larghezza) uguale alla larghezza del suo genitore.

Di seguito sono riportati alcuni esempi per mostrare come funziona flex vs inline-flex e anche una rapida dimostrazione di come gli elementi inline vs block funzionano ...

display: inline-flex; flex-direction: row;

Fiddle

display: flex; flex-direction: row;

Fiddle

display: inline-flex; flex-direction: column;

Fiddle

display: flex; flex-direction: column;

Fiddle

display: inline;

Fiddle

display: block

Fiddle

Inoltre, una grande doc di riferimento: A Complete Guide to Flexbox - css tricks

fonte

2016-12-10 09:08:13

Display: flex applicazione di un layout flessibile alle voci di flex o bambini del contenitore solo. Quindi, il contenitore stesso rimane un elemento a livello di blocco e occupa quindi l'intera larghezza dello schermo.

Questo fa sì che ogni contenitore flessibile si sposti su una nuova riga sullo schermo.

Display: inline-flex applicare il layout flessibile agli articoli flessibili o bambini e al contenitore stesso. Di conseguenza il contenitore si comporta come un elemento flessibile in linea proprio come fanno i bambini e quindi occupa la larghezza richiesta dai suoi elementi/solo bambini e non dall'intera larghezza dello schermo.

Ciò causa due o più contenitori di flessione uno dopo l'altro, visualizzati come inline-flex, allineati parallelamente sullo schermo finché non viene presa l'intera larghezza dello schermo.

fonte

2017-01-09 16:40:50

"applica il layout flessibile [...] al contenitore stesso" [citazione necessaria] – BoltClock

@NoorJahanMukammel: buona risposta. –

Forse dovrei proprio spiegarlo a beneficio di altri lettori: display: inline-flex ** non applica ** il layout flessibile al contenitore stesso. Il motivo per cui i contenitori flessibili in linea compaiono uno dopo l'altro è nel nome: "inline-flex" (le persone pensano che il nome sia fuorviante o qualcosa del genere?). Non capisco perché la gente elabori questa risposta e la definisca una "buona risposta" quando la mia risposta di oltre 2 anni prima contraddice direttamente ciò che dice, e il rispondente non si è preso la briga di fornire una citazione quando ne ha chiesto uno (presumibilmente perché * non possono *, perché l'informazione è sbagliata). – BoltClock

OK, so che in un primo momento potrebbe essere un po 'di confusione, ma display sta parlando del elemento genitore, quindi vuol dire quando diciamo: display: flex;, si tratta di l'elemento e quando diciamo display:inline-flex;, è anche fare dell'elemento stesso inline ...

e 'come fare un divlinea o blocco, eseguire il frammento di sotto e si può vedere come display flex rompe alla riga successiva:

.inline-flex { 
 
    display: inline-flex; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
p { 
 
    color: red; 
 
}

<body> 
 
    <p>Display Inline Flex</p> 
 
    <div class="inline-flex"> 
 
    <header>header</header> 
 
    <nav>nav</nav> 
 
    <aside>aside</aside> 
 
    <main>main</main> 
 
    <footer>footer</footer> 
 
    </div> 
 

 
    <div class="inline-flex"> 
 
    <header>header</header> 
 
    <nav>nav</nav> 
 
    <aside>aside</aside> 
 
    <main>main</main> 
 
    <footer>footer</footer> 
 
    </div> 
 

 
    <p>Display Flex</p> 
 
    <div class="flex"> 
 
    <header>header</header> 
 
    <nav>nav</nav> 
 
    <aside>aside</aside> 
 
    <main>main</main> 
 
    <footer>footer</footer> 
 
    </div> 
 

 
    <div class="flex"> 
 
    <header>header</header> 
 
    <nav>nav</nav> 
 
    <aside>aside</aside> 
 
    <main>main</main> 
 
    <footer>footer</footer> 
 
    </div> 
 
</body>

creare anche rapidamente l'immagine qui sotto per mostrare la differenza a colpo d'occhio:

fonte

2017-10-21 15:01:47 Alireza

Differenza tra display: inline-flex e display: flex

risposta

Problemi correlati