Flex 列仅在包裹时居中

Question

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

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

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

---

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>