フレックスボックスを使用してカラム間で順序付けられていないリスト項目を破る

Question

フレックスボックスでリスト内のリスト項目をブレークさせる方法はありますか？私は3列のドロップダウンメニューを作成したいと思います。

例えば、私のHTMLは次のとおりです。

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

：私はそれがこのように表示したい

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

を：私はそれがこのように表示したくない

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

私はflexboxを使ってみましたが、これらのプロパティを適用しましたが、リスト項目を複数の列に分割する方法が見つかりませんでした。

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

Answer 1

フレックスコンテナの初期設定はflex-wrap: nowrapです。

これは、フレックスアイテムが強制的に1行にとどまることを意味します。

マルチラインフレックスコンテナを作成するには、この設定をflex-wrap: wrapで上書きできます。

コンテナの高さを定義することも重要です。さもなければ、付加的な可撓性のアイテムは、包装する必要がなく単に容器を膨張させることができる。