我正在使用flexbox将列表项显示在列中。当高度达到特定值时,项目应该换行到更多的列中,列应该在水平方向上居中,每个列内的列表项应该左对齐。我使用
我意识到多列布局可能更为明显,但我不想定义
问题: 当项目换行到多列时,列只在水平方向上居中。如果只有一列,则列不会居中。我在Windows 10 Home和MacOS Sierra上都看到了这种情况,Chrome 63表现如此。在Firefox中,它看起来与我想要的方式相同(下面是截图)。
我是否漏掉了什么? 如何跨浏览器始终使列在水平方向上居中?
注:上述内容涉及IT技术。
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>
注:上述内容涉及IT技术。
translate
来解决另一个 Flexbox 的 bug:https://dev59.com/questions/aVsX5IYBdhLWcg3wY-kh - Asons