フレックスカラムは、ラップされたときにのみ中心になります。

Question

フレックスボックスを使用してリストアイテムを列に表示しています。アイテムは、特定の高さの後に列を追加し、列を水平に中央に配置し、各列のリストアイテムを左揃えにする必要があります。私はmax-heightを使用してリストの高さを制限し、flex-flow: column wrapはラッピングカラムを作成し、align-content: centerはカラムを中央に配置します。

私はmulti-columnソリューションがより明白かもしれないことを認識していますが、column-widthまたはcolumn-countを定義したくないので、私はflexboxソリューションを選択しました。アイテムが複数の列に折り返す場合

通報
列は水平方向にのみ集中しています。列が1つだけの場合、列は中央に配置されません。 Windows 10 HomeとMacOS Sierraの両方でChrome 63でこの動作が確認されています。 Firefoxでは、それは私が意図した方法（以下のスクリーンショット）に見えます。

何か不足していますか？
どのようにして列を常にブラウザの横方向に中央に配置することができますか？

.filter_drop { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-content: center; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    max-height: 7em; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
.filter_drop li { 
 
    margin: 0 1em 0 0; 
 
    line-height: 1.2; 
 
}

<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two </li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight </li> 
 
    <li>Nine</li> 
 
    <li>Ten</li> 
 
    <li>Eleven</li> 
 
    <li>Twelve</li> 
 
</ul> 
 
<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
</ul> 
 
<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul> 
 
<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
</ul>

View on JSFiddle

---

クローム63：

Firefoxの57：

Answer 1

align-contentは、フレックスコンテナに複数の行がある場合にのみ機能します。

align-itemsまたはalign-selfが必要です。

ここで完全な説明です：

• How does flex-wrap work with align-self, align-items and align-content?

.filter_drop { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-content: center; 
 
    align-items: center; /* NEW */ 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    max-height: 7em; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
.filter_drop li { 
 
    margin: 0 1em 0 0; 
 
    line-height: 1.2; 
 
}

<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two </li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight </li> 
 
    <li>Nine</li> 
 
    <li>Ten</li> 
 
    <li>Eleven</li> 
 
    <li>Twelve</li> 
 
</ul> 
 
<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
</ul> 
 
<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul> 
 
<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
</ul>