フレックス方向：列;は動作していません

Question

display: flexとulタグがあります。

flex-direction: column;で列で注文する必要がありますが、機能しません。子供

#nav li.four_columns ul.sub-menu li { 
    flex-basis: 25%; 
    /* white-space: nowrap; */ 
    /* overflow: hidden; */ 
    /* text-overflow: ellipsis; */ 
    /* border-bottom: none; */ 
} 

のコンテナ

#nav li.four_columns ul.sub-menu { 
    width: 600px; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    flex-flow: wrap; 
} 

CSSの

CSSは私が助けに感謝します。ここで

Answer 1

はあなたの問題の源である：flex-flow: wrap

これはflex-directionおよび/またはflex-wrapの省略形プロパティです。

このプロパティの初期値はrow nowrapです。

flex-wrapのコンポーネントは、wrapと宣言されています。

これは、flex-directionコンポーネントがデフォルト値のままであることを意味します（row）。

したがって、フレックスアイテムは、ラップする行に水平に整列しています。解決策として

、のいずれかを指定し、両成分：

flex-wrap: wrap 

また、重要な：あなたはすでに、ルールにflex-direction: columnを持っflex-flowし、使用を取り除くため、

flex-flow: column wrap 

OR、：フレックスアイテムを列方向に折り返したい場合は、コンテナの高さを定義する必要があります。固定された高さがなければ、フレックスアイテムはラップする場所を知らず、必要に応じてコンテナを拡大して単一の列にとどまります。

参考：

• 5.3. Flex Direction and Wrap: the flex-flow shorthand