css - 带有 ul 列表的 Flexbox

Question

我想使用 flexbox 为我的列表构建 2x2 网格。我的代码如下:

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

CSS:

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

不幸的是，它将我的四个 li 排成一行。

Answer 1

包装灵活的盒子行并给元素 flex-basis: 50% 或 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>