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

【问题标题】：How do you make the separation between elements consistent? [duplicate]你如何使元素之间的分离保持一致？ [复制]
【发布时间】：2018-06-01 07:54:43
【问题描述】：

我正在尝试设置元素的样式，使其看起来像这样。（正方形元素的大小应该都一样）

但最终发生的是：

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

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

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

【问题讨论】：

只需删除 justify-content:space 之间的空格，您就可以在元素周围添加边距。

标签： css flexbox

【解决方案1】：

将align-content: flex-start 添加到.container 样式中。

当横轴上有额外空间时，这会在其中对齐 flex 容器的线条，类似于 justify-content 在主轴中对齐单个项目的方式。

More info about align-content.

【讨论】：

我试过了，现在第一行和第二行之间没有边距
那么你需要在.element样式中添加margin-bottom: 10px之类的东西。