使用flexbox打破無序列表項目

Question

有沒有辦法使用flexbox破壞無序列表中的列表項目？我想創建一個3列下拉菜單。

例如，我的HTML是：

<ul id="nav"> 
    <li><a href="./?>Navigation link 1</a></li> 
    <li><a href="./?>Navigation link 2</a></li> 
    <li><a href="./?>Navigation link 3</a></li> 
    <li><a href="./?>Navigation link 4</a></li> 
    <li><a href="./?>Navigation link 5</a></li> 
</ul> 

我不希望它顯示是這樣的：

Navigation link 1 | Navigation link 2 
Navigation link 3 | Navigation link 4 
Navigation link 5 | 

我希望它顯示是這樣的：

Navigation link 1 | Navigation Link 5 
Navigation link 2 | 
Navigation link 3 | 
Navigation link 4 | 

我嘗試使用flexbox，並且應用了這些屬性，但是我找不到將列表項分成多個列的方法：

#nav { 
    display: flex; 
    flex-direction: column; 
} 

Answer 1

柔性容器的初始設置是flex-wrap: nowrap。

這意味着flex項目被強制保留在一行中。

要創建多線柔性容器，您可以用flex-wrap: wrap覆蓋此設置。

爲容器定義高度也很重要。否則，額外的彈性項目可能會簡單地擴展容器而不需要包裝。