前端 - flex布局如何让换行后元素从头开始且和上一行有一定间距？

Question

描述

要求是，各个元素之间相距24px，换行后，下一行的元素和第一行的开头元素对齐，并且和上一行元素也是24px的间距。

我的解决方案（有问题）

给兄弟元素设置margin-left和top,结果换行后的元素不是从头开始的，第二个元素如果没换行也会有margintop。

于是我就给每个元素设置了margin-right，兄弟元设置margin-bottom，结果第二个元直接换行的话，就触发不了margin-bottom，还是挨在了一起。

如果给每个元素都设置margin-bottom，只有一个元素时，高度看着不正常。

好无语。

难道flex只能用于不换行吗？

解决

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 16px;
}

Answer 1

最外层(overvlow:hidden)，再拿一个容器套一下，向左上负间距（margin: -10px 0 0 -10px），然后子元素设置左上正间距(margin: 10px 0 0 10px)

Answer 2

一般来说是使用 margin-right + margin-bottom 给每一个元素都添加外边距。

或者使用我这个文章中提到的 gap in flex 的方式 �� 在 Flex 布局中使用 gap 属性。
只不过会有一些兼容问题，特别是在一些老版本的微信中/小程序中打开时。
如果考虑兼容性的话，替代方式可以看我的这个问答 �� 弹性布局(flex布局)中使用gap的兼容性问题应该如何解决？

Answer 3

你可以用nth-child选择器来解决这个问题，兼容性最好的方案：

<div class="container">
  <div class="row">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    ...
  </div>
  <div class="row">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    ...
  </div>
  ...
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.row {
  display: flex;
}

.item {
  margin-right: 24px;
  margin-bottom: 24px;
}

.row .item:last-child {
  margin-right: 0;
}

Answer 4

可以用 gap 属性的话就很容易，直接 gap:24px；否则的话，display: grid，然后配合 gap 属性。最后就是 margin-bottom。