Tomek Buszewski Tomek Buszewski - 3 months ago 17
CSS Question

Flexbox with ul list

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

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>

Comments