Flex 列仅在包裹时居中

Question

我使用 flexbox 在列中显示列表项。项目应在特定高度后环绕成更多列，列应水平居中，每列中的列表项应左对齐。我正在使用max-height来限制列表高度、flex-flow: column wrap构建环绕列以及align-content: center使列居中。

我意识到多列解决方案可能更明显，但我不想定义column-widthor column-count，所以我选择了 flexbox 解决方案。

当项目换行到多列时，问题列仅水平居中。如果只有一列，则该列不居中。我在 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>

在 JSFiddle 上查看

---

铬 63：

火狐 57：

Answer 1

align-content仅当 Flex 容器中有多行时才有效。

align-items或者align-self需要对齐单行。

这是完整的解释：

• flex-wrap 如何与align-self、align-items 和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>