弹性列只有在换行时居中。

Question

弹性列只有在换行时居中。

7

我正在使用flexbox将列表项显示在列中。当高度达到特定值时，项目应该换行到更多的列中，列应该在水平方向上居中，每个列内的列表项应该左对齐。我使用max-height来限制列表高度，使用flex-flow: column wrap来构建换行列，并使用align-content: center来居中列。

我意识到多列布局可能更为明显，但我不想定义column-width或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上查看

Chrome 63:

Firefox 57:

注：上述内容涉及IT技术。

- showdev

1

如果您感兴趣，可以通过以下链接解决“左对齐”问题，而无需分配固定宽度: https://jsfiddle.net/gznyyegn/ ... 如果需要，我可以将其发布为答案。需要使用 translate 来解决另一个 Flexbox 的 bug：https://dev59.com/questions/aVsX5IYBdhLWcg3wY-kh - Asons

谢谢@LGSon。有趣的想法，但是我无法使居中工作（https://jsfiddle.net/gznyyegn/3/）。也许是因为你链接的问题？ - showdev

是的，没错...在元素中没有检查更广泛的文本，但是我知道它不会完全动态工作。不过，在Edge浏览器中（版本16，秋季创作者更新）它运行得非常完美，已经修复了这个错误 :) - Asons

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

align-content 只对有多行的 flex 容器生效。

对于单行需要使用 align-items 或 align-self 来进行对齐。

下面是详细解释：

如何使用 align-self、align-items 和 align-content 控制 flex-wrap？

.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>