Flexbox with ul list

Question

I want to use flexbox to build 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 in a row.

Answer 1

Wrap the flexible box row and give the items 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's flex know it's allowed to wrap. It's default argument when undefined is nowrap.

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