css – Flex列仅在包装时居中

2023年4月6日 305次阅读

我正在使用flexbox在列中显示列表项.项目应在特定高度后包装到更多列中,列应水平居中,并且每列中的列表项应左对齐.我正在使用max-height来限制列表高度,flex-flow：列包装以构建包装列,以及align-content：center以使列居中.

我意识到multi-column解决方案可能更明显,但我不想定义列宽或列数,所以我选择了一个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>

View on JSFiddle

Chrome 63：
《css – Flex列仅在包装时居中》

Firefox 57：
《css – Flex列仅在包装时居中》

最佳答案 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>
点赞