Flexbox 列表对齐在 3 个元素行上的元素之间留出空间

Question

我遇到了 flexbox 列表对齐的问题。我有一个元素列表显示在一行 3 上。但是在一行有 2 个元素的中间有一个空格。

我的目标是让一行只有 2 个元素看起来像 x x o。然而，我的代码留下了这样的元素 x o x。我还注意到元素并没有完全以它的 div 为中心。

见下文：

Flexbox alignment issue

我的 ul 设置为：

 display:flex;
    flex-flow: row wrap;
    width:100%;
    justify-content: space-between;
    align-items: center;

和 li 与：

{
    color:black;
    font-size:16px;
    margin-bottom:20px;
    width: calc(100% / 3);

Answer 1

中间的空格是由space-between造成的。对于那个特定的行，只需让它遵循没有任何样式的正常行。它将从左到右开始。如果您想按照特定顺序创建内容，您可以使用更容易执行的网格来代替。

ul {
 display: grid;
 grid-template-columns: auto auto auto;
}

这将使它按照您想要的方式井井有条。

或者，如果您仍想使用 flexbox，则针对该特定行

ul{
display: flex;
flex-direction: row;
}

li{
width: calc(100% / 3);
}