html - Flexbox:我列表中的空格问题

Question

我有这个列表 ol，其中的元素 li 的样式如下:

ol {     
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 400px;
}

li {
    width: 120px;
    height: 120px;
}

DEMO

如您所见，一行可以容纳 3 个元素。因为我正在使用 justify-content: space-between 第一行看起来完全符合我的要求。但是，第二行没有(因为它只有两个元素)。我希望它们的位置就像有第 6 个元素一样(它们之间没有间隙并且左对齐)

无论如何我可以用 flex box 实现这个，还是我应该引入一个不可见的第 6 个元素？

Answer 1

使用 display:flex; 和 justify-content:space-between;

无法实现您的要求

查看更多详情:W3C:Axis Alignment: the ‘justify-content’ property

我建议使用 justify-content:center; 或 justify-content:flex-start; 带边距。