css - flex 列仅在包裹时居中

Question

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

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

问题
当元素换行到多列时，列仅水平居中。如果只有一列，则该列不居中。我在 Windows 10 家庭版和 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

---

Chrome 63:

火狐 57:

Answer 1

align-content 仅在 flex 容器中有多行时才有效。

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>