如何使元素之间的分离保持一致？ [重复]

Question

这个问题在这里已有答案：

• Remove space (gaps) between multiple lines of flex items when they wrap 1回答
• How does flex-wrap work with align-self, align-items and align-content? 2回答

我试图设计我的元素，使它看起来像这样。 （方形元素应该都是相同的大小）

但最终发生的是：

这是我的容器和元素的css代码：

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 400px;
}

.element {
    width: 80px;
    height: 80px;
    background-color: white;
}

Answer 1

将align-content: flex-start添加到.container风格。

当横轴上有额外的空间时，这会将柔性容器线对齐，类似于qazxsw poi如何在主轴内对齐各个项目。

justify-content