Flexbox con lista ul

Question

Voglio usare flexbox per creare una griglia 2x2 con la mia lista. Il mio codice è il seguente:

<ul class="cont"> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
</ul> 

css:

.cont { display: flex; } 
.cont li { width: 50%; } 

Purtroppo, si allinea quattro dei miei li di fila.

Answer 1

Avvolgere la riga di dialogo flessibile e dare gli elementi flex-basis: 50% o width: 50%

.cont { 
 
    display: flex; 
 
    flex-flow: row wrap; /* Shorthand for flex-direction: row and flex-wrap: wrap */ 
 
} 
 
.cont li { 
 
    flex-basis: 50%; /* or width: 50% */ 
 
}

<ul class="cont"> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
</ul>

Answer 2

flex-wrap: wrap cerchiamo di sapere che è consentito avvolgere. È l'argomento predefinito quando non definito è nowrap.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

Answer 3

Probabilmente è necessario impostare le proprietà di flessione del lie make sur chiedi al genitore di avvolgere quando richiesto.

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.cont { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.cont li { 
 
    flex: 0 0 50%; 
 
    border: 1px solid grey; 
 
    text-align: center; 
 
}

<ul class="cont"> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
</ul>

Answer 4

Un altro modo è quello di utilizzare Flex-direzione.

.cont { 
    display:flex; 
    flex-direction:column; // or row depending on which way you want it to flow 
}