使用CSS flexbox创建一个包含2列的菜单

Question

我想创建一个类似于图像中的菜单。我有大部分工作，但我试图用红色复制容器。只需要红色容器中的项目和白色字体颜色，即更多类别和学习指南。

我正在尝试学习flexbox并使用display：flex。要求是它总是有2列。理想情况下，它首先填充第一列，然后填充第二列，即在提供的图像中标记为：

<ul>
   <li>Adobe Photoshop</li>
   <li>Adobe Illustrator</li>
   <li>Inspiration</li>
   ...
   <li>News</li>
</ul>

理想情况下，知道是否有6个项目然后需要显示2列3行才足够聪明。即我不需要提供高度？

不确定这是否可行，但感谢任何帮助。

Answer 1

正如我在评论中提到的那样：您需要使用flex-wrap: wrap，然后将width元素设置为34%和50%之间的值，以更好的方式运行。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 50%;
}

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
</div>

如果容器的高度是固定的，也可以实现垂直的：

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 60px;
}

.item {
  width: 50%;
}

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
</div>