使用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>