Qual è la differenza tra display: inline-flex e display: flex?

331

Sto cercando di allineare verticalmente gli elementi all'interno di un wrapper ID. Ho dato la proprietàdisplay:inline-flex; a questo ID poiché il wrapper ID è il contenitore flessibile.

Ma non c'è differenza nella presentazione. Mi aspettavo che sarebbe stato visualizzato tutto nell'ID wrapper inline. Perché no?

#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>
Espandi frammento

css  flexbox 
— astridx
fonte

Risposte:

407

display: inline-flexnon rende gli oggetti flessibili visualizzati in linea. Rende in linea il display del contenitore flessibile . Questa è l'unica differenza tra display: inline-flexe display: flex. Un confronto simile può essere fatto tra display: inline-blocke display: block, e praticamente qualsiasi altro tipo di display che ha una controparte in linea .1

Non c'è assolutamente alcuna differenza nell'effetto sugli oggetti flessibili; il layout flessibile è identico se il contenitore flessibile è a livello di blocco o in linea. In particolare, gli stessi oggetti flessibili si comportano sempre come scatole a livello di blocco (sebbene ne abbiano alcuni proprietà di blocchi in linea). Non è possibile visualizzare gli elementi flessibili in linea; altrimenti in realtà non hai un layout flessibile.

Non è chiaro cosa intendi esattamente con "allineamento verticale" o perché esattamente desideri visualizzare i contenuti in linea, ma sospetto che il flexbox non sia lo strumento giusto per qualsiasi cosa tu stia cercando di realizzare. È probabile che quello che stai cercando sia solo un vecchio layout inline ( display: inlinee / o display: inline-block), per il quale flexbox non è un rimpiazzo; flexbox non è la soluzione di layout universale che tutti sostengono di essere (lo sto affermando perché l'idea sbagliata è probabilmente il motivo per cui stai considerando flexbox in primo luogo).

1 Le differenze tra il layout del blocco e il layout in linea non rientrano nell'ambito di questa domanda, ma quello che spicca maggiormente è la larghezza automatica: le caselle a livello di blocco si allungano orizzontalmente per riempire il blocco di contenimento, mentre le caselle a livello in linea si restringono per adattarsi alla loro Contenuti. In effetti, è solo per questo motivo che non userai quasi mai a display: inline-flexmeno che tu non abbia un'ottima ragione per mostrare il tuo contenitore flessibile in linea.

— BoltClock
fonte
14
Demo di violino migliorata per differenziare inline-flexe flex: jsfiddle.net/mgr0en3q/1 violino originale di @ fish-graphics e @astridx
— Kevin Law,
Risposta assolutamente utile. Mi sono confuso per la prima volta. Quando applico il flex in linea, l'elemento flessibile non cambia quando lo applico anche con il display flex. In realtà si applica al contenitore flessibile :)
— Faris Rayhan,
68

OK, all'inizio so che potrebbe essere un po 'confuso, ma displaysta parlando dell'elemento genitore, quindi significa quando diciamo:, display: flex;riguarda l'elemento e quando diciamo display:inline-flex;, sta anche creando l'elemento stessoinline ...

È come fare un div inline o un blocco , eseguire lo snippet di seguito e puoi vedere come si display flexrompe 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>
Espandi frammento

Inoltre, crea rapidamente l'immagine qui sotto per mostrare la differenza a colpo d'occhio:

display flex vs display inline-flex

— Alireza
fonte
3
Cosa stai usando per questa immagine? Questo carattere è molto carino.
— shu,
5
C'è un piccolo errore di battitura sull'immagine sopra. "display: flex-inline" dovrebbe essere "display: inline-flex" simile a "inline-block", ecc.
— AlienKevin,
62

flexed inline-flexentrambi applicano il layout flessibile ai figli del contenitore. Il contenitore con display:flexsi comporta come un elemento a livello di blocco stesso, mentre display:inline-flexfa in modo che il contenitore si comporti come un elemento inline.

— Leo
fonte
29

La differenza tra "flex" e "inline-flex"

Risposta breve:

Uno è in linea e l'altro risponde sostanzialmente come un elemento a blocchi (ma ha alcune delle sue differenze).

Risposta più lunga:

Inline-Flex - La versione inline di flex consente all'elemento, e ai suoi figli, di avere proprietà flex pur rimanendo nel flusso regolare del documento / pagina web. Fondamentalmente, puoi posizionare due contenitori flessibili in linea nella stessa riga, se le larghezze erano abbastanza piccole, senza alcun eccesso di stile per consentire loro di esistere nella stessa riga. Questo è abbastanza simile a "blocco in linea".

Flessione: il contenitore e i relativi figli hanno proprietà di flessione ma il contenitore riserva la riga, poiché viene rimosso dal normale flusso del documento. Risponde come un elemento a blocchi, in termini di flusso di documenti. Due contenitori flexbox non potrebbero esistere sulla stessa riga senza eccesso di stile.

Il problema che potresti avere

A causa degli elementi che hai elencato nel tuo esempio, anche se immagino, penso che tu voglia usare flex per visualizzare gli elementi elencati in modo uniforme riga per riga ma continui a vederli fianco a fianco.

Il motivo per cui probabilmente hai problemi è perché flex e inline-flex hanno la proprietà "flex-direction" predefinita impostata su "row". Questo mostrerà i bambini fianco a fianco. La modifica di questa proprietà in "colonna" consentirà agli 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 breve demo di come funzionano gli elementi inline vs block ...

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 a Flexbox - trucchi CSS

15

Display: flex applica il layout flessibile solo agli oggetti flessibili o ai bambini del contenitore. Quindi, il contenitore stesso rimane un elemento a livello di blocco e occupa così l'intera larghezza dello schermo.

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

Display: inline-flex applica il layout flessibile agli articoli flessibili o ai bambini, nonché 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 solo dai suoi elementi / figli e non l'intera larghezza dello schermo.

Questo fa sì che due o più contenitori flessibili uno dopo l'altro, visualizzati come inline-flex, si allineano fianco a fianco sullo schermo fino a quando non viene presa l'intera larghezza dello schermo.

— Noor Jahan Mukammel
fonte
1
"applica il layout flessibile [...] al contenitore stesso" [citazione necessaria]
— BoltClock
1

Hai bisogno di maggiori informazioni in modo che il browser sappia cosa vuoi. Ad esempio, ai bambini del contenitore deve essere detto "come" flettersi.

Fiddle aggiornato

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

— GRAFICA DI FiSH
fonte
2
Grazie per la tua risposta, ma sapevo che avrei potuto farlo in questo modo. Ho solo frainteso il display delle proprietà: inline-flex; - Pensavo che questa proprietà fosse un modo più semplice per raggiungere il mio obiettivo. Ma tra gli ultimi giorni ho imparato che questa proprietà rende solo la visualizzazione del contenitore in linea. Con uno sfondo aggiunto vedo ora la differenza tra le proprietà display: inline-flex; e display: flex; in una flexbox. jsfiddle.net/vUSmV/101
— astridx il
-1

Apri in Pagina intera per una migliore comprensione

.item {
  width : 100px;
  height : 100px;
  margin: 20px;
  border: 1px solid blue;
  background-color: yellow;
  text-align: center;
  line-height: 99px;
}

.flex-con {
  flex-wrap: wrap;
  /* <A>    */
  display: flex;
  /* 1. uncomment below 2 lines by commenting above 1 line */
  /* <B>   */
/*   display: inline-flex; */
	
}

.label {
  padding-bottom: 20px;
}
.flex-inline-play {
  padding: 20px;
  border: 1px dashed green;
/*  <C> */
  width: 1000px;
/*   <D> */
  display: flex;
}
<figure>
  <blockquote>
     <h1>Flex vs inline-flex</h1>
    <cite>This pen is understand difference between
    flex and inline-flex. Follow along to understand this basic property of css</cite>
    <ul>
      <li>Follow #1 in CSS:
        <ul>
          <li>Comment <code>display: flex</code></li>
          <li>Un-comment <code>display: inline-flex</code></li>
        </ul>
      </li>
      <li>
        Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
        <ul>
					<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
          <li>A with C</li>
          <li>A with C & D -- Something wrong ? Keep going !</li>
          <li>B with C</li>
          <li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
        </ul>
      </li>
    </ul>
  </blockquote>
  
</figure>
<br/>
 <div class="label">Playground:</div>
<div class="flex-inline-play">
  <div class="flex-con">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="flex-con">
    <div class="item">X</div>
    <div class="item">Y</div>
    <div class="item">Z</div>
    <div class="item">V</div>
    <div class="item">W</div>
  </div>
</div>
Espandi frammento

— Pawan Gangwani
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.