Differenza tra display: inline-flex e display: flex

Ho difficoltà a capire la display:inline-flex; della proprietà display:inline-flex; . Qual è la 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 display:inline-flex; della proprietà display:inline-flex; a questo ID; perché il wrapper ID è il contenitore flessibile.

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

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

Esempio JSFiddle

Qual è la differenza?

display: inline-flex non rende gli elementi flessibili visualizzati in linea. Rende in linea il contenitore flessibile . Questa è l’unica differenza tra display: inline-flex e display: flex . Un confronto simile può essere fatto tra display: inline-block e display: block , e praticamente qualsiasi altro tipo di display che abbia una controparte in linea . 1

Non c’è assolutamente 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 elementi flessibili stessi si comportano sempre come scatole a livello di blocco (sebbene abbiano alcune proprietà dei blocchi in linea). Non è ansible visualizzare gli elementi flessibili in linea; altrimenti non hai un layout flessibile.

Non è chiaro cosa intendi esattamente per “allineare verticalmente” o perché esattamente vuoi visualizzare i contenuti in linea, ma sospetto che Flexbox non sia lo strumento giusto per qualsiasi cosa tu stia cercando di realizzare. Le probabilità sono ciò che stai cercando è semplicemente un vecchio layout in linea ( display: inline e / o display: inline-block ), per il quale la flexbox non è una sostituzione; flexbox non è la soluzione di layout universale che tutti sostengono che sia (sto affermando questo perché l’idea sbagliata è probabilmente il motivo per cui stai prendendo in considerazione Flexbox in primo luogo).


1 Le differenze tra layout a blocchi e layout in linea non rientrano nello scopo di questa domanda, ma quella che si distingue maggiormente è la larghezza automatica: le windows a livello di blocco si estendono orizzontalmente per riempire il blocco contenente, mentre le caselle a livello interno si restringono per adattarsi al loro contenuto. Infatti, solo per questo motivo non utilizzerai quasi mai il display: inline-flex meno che tu non abbia una buona ragione per mostrare il tuo flex container in linea.

flex e inline-flex entrambi applicano il layout flessibile ai bambini del contenitore. 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.

La differenza tra “flex” e “inline-flex”

Risposta breve:

Uno è in linea e l’altro risponde come un elemento di blocco (ma ha alcune delle sue differenze).

Risposta più lunga:

Inline-Flex: la versione in linea del flex consente all’elemento, ed è figlio, di avere proprietà flessibili pur rimanendo nel stream 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 riserva la riga, poiché viene tolto dal normale stream del documento. Risponde come un elemento di blocco, in termini di stream di documenti. Due contenitori Flexbox non potrebbero esistere sulla stessa fila senza eccessi di styling.

Il problema che potresti avere

A causa degli elementi che hai elencato nel tuo esempio, anche se sto indovinando, penso che tu voglia usare flex per visualizzare gli elementi elencati in modo uniforms riga per fila, ma continuare a vedere gli elementi fianco a fianco.

Il motivo per cui è probabile che tu abbia dei problemi è che flex e inline-flex hanno la proprietà “flex-direction” di default 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; 

Violino

 display: flex; flex-direction: row; 

Violino

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

Violino

 display: flex; flex-direction: column; 

Violino

 display: inline; 

Violino

 display: block 

Violino

Inoltre, un ottimo documento di riferimento: una guida completa per Flexbox – trucchi css

OK, all’inizio so che potrebbe essere un po ‘confuso, ma la display sta parlando dell’elemento genitore, quindi significa quando diciamo: display: flex; , riguarda l’elemento e quando diciamo display:inline-flex; , sta anche rendendo l’elemento stesso in inline

È come fare un div inline o un blocco , eseguire lo snippet qui sotto e puoi vedere come il display flex rompe alla riga successiva:

 .inline-flex { display: inline-flex; } .flex { display: flex; } p { color: red; } 
  

Display Inline Flex

header
main
footer
header
main
footer

Display Flex

header
main
footer
header
main
footer

Display: flex applica il layout flessibile solo agli oggetti flex o ai bambini del contenitore. 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 applica il layout flessibile agli oggetti flessibili o ai 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ò provoca due o più contenitori di flessione uno dopo l’altro, visualizzati come inline-flex, allineati parallelamente sullo schermo fino a quando viene presa l’intera larghezza dello schermo.

Hai bisogno di un po ‘più di informazioni in modo che il browser sappia cosa vuoi. Ad esempio, ai bambini del contenitore deve essere detto “come” flettere.

Fiddle aggiornato

Ho aggiunto #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } al tuo CSS e cambiato inline-flex in flex , e puoi vedere come gli elementi ora si spaziano uniformsmente sulla pagina.