Gli elementi in un contenitore flessibile non vengono avvolti

Question

Quando si tenta di inserire elementi di blocco in un contenitore flessibile, rimangono tutti sulla stessa riga come se fossero blocchi in linea.

Vorrei che le due prime div si trovassero sulla stessa riga e che l'ultima fosse su una seconda riga. Purtroppo, non sembra funzionare.

Qualcuno ha qualche idea?

<div style="display: flex"> 
 
    <div style="display: inline-block"> 
 
    This is an inline block element 
 
    </div> 
 
    <div style="display: inline-block"> 
 
    This is an inline block element 
 
    </div> 
 
    <div style="display: block"> 
 
    This is a block element 
 
    </div> 
 
</div>

Answer 1

Un'impostazione iniziale di un contenitore Flex è flex-wrap: nowrap. Ciò significa che gli elementi flessibili sono obbligati a rimanere in una singola riga.

È possibile sovrascrivere il valore predefinito con flex-wrap: wrap.

Il valore display degli elementi flessibili viene ignorato nel layout flessibile.

---

Un contenitore flessibile, che è un elemento con display: flex o display: inline-flex stabilisce un flex formatting context. Sebbene simile a uno block formatting context, ci sono differenze.

Una differenza è che i figli di un contenitore flessibile ignorano la proprietà display.

Un'altra differenza è che, in un contenitore flessibile, i margini non collassano e le proprietà float e clear non hanno alcun effetto.

Un contenitore flessibile viene fornito con diverse impostazioni predefinite.Tra questi:

• justify-content: flex-start - elementi Flex impilare all'inizio della riga
• flex-shrink: 1 - elementi di flessione sono autorizzati a ridursi e non traboccare il contenitore
• align-items: stretch - articoli flex si espanderà per coprire la cross-dimensioni del contenitore
• flex-direction: row - articoli flex allineerà orizzontalmente
• flex-wrap: nowrap - elementi flessibili sono costretti a rimanere in una singola linea

Nota gli ultimi due elementi.

Gli elementi flessibili si allineeranno in fila e non possono essere avvolti.

Se si desidera disporre di due elementi flessibili nella prima riga e di un terzo elemento nella seconda riga, consentire al contenitore di essere multiriga con flex-wrap: wrap.

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.box { 
 
    flex: 0 0 45%; 
 
    height: 50px; 
 
    margin: 5px; 
 
    background-color: lightgreen; 
 
    border: 1px solid #ccc; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Inoltre, se si desidera contenitori flessibili per visualizzare in linea, utilizzare display: inline-flex non display: flex. Questi sono paragonabili a display: inline-block e display: block.

Answer 2

• uso flex-wrap:wrap in genitore perché per impostazione predefinita il flex-wrap è nowrap

• uso flex-basis:50% nel bambino, per dividere entrambi elementi inline-block in stessa taglia.

Altre informazioni più dettagliate su FlexBox su questo articolo: A Complete Guide to Flexbox

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    margin: 0 
 
} 
 
.flex { 
 
    display: flex; 
 
    flex-wrap: wrap 
 
} 
 
.flex div { 
 
    flex: 0 50%; /*change to 1 50% to see the difference */ 
 
    border: 1px solid black; 
 
    padding: 10px 
 
}

<div class="flex"> 
 
    <div> 
 
    This is an inline block element 
 
    </div> 
 
    <div> 
 
    This is an inline block element 
 
    </div> 
 
    <div> 
 
    This is a block element 
 
    </div> 
 
</div>