Flexbox z listą ul

Question

Chcę używać flexbox do budowy siatki 2x2 z moją listą. Mój kod wygląda następująco:

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

css:

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

Niestety, to wyrównuje czterech moich li rzędu.

Answer 1

zawinąć elastyczne pudełko wiersz i dać przedmioty flex-basis: 50% lub 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 Załóżmy, że można owinąć. Jest to domyślny argument, gdy undefined to nowrap.

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

Answer 3

Prawdopodobnie trzeba ustawić wyginanie właściwości lii make sur powiedz rodzicowi, aby owinął się w razie potrzeby.

* { 
 
    -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

Innym sposobem jest użycie elastycznego kierunku.

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