Flexbox with ul

Question

I want to use flexbox to build a 2x2 grid with my list. My code is as follows:

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

CSS

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

Unfortunately, it aligns four of my li per line.

Answer 1

Wrap the flex-basis: 50% line and give the elements flex-basis: 50% or 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 Let Flex know that it is allowed to wrap. This is the default argument when undefined is nowrap .

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

Answer 3

Another way is to use flexible direction.

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

Answer 4

You probably need to set the flex properties for li and make a request to parent wrap when needed.

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