CSS - 弹性网格之间的边距[重复]答案

【问题标题】：CSS - margin between flex grid [duplicate]CSS - 弹性网格之间的边距[重复]
【发布时间】：2020-11-09 10:07:48
【问题描述】：

我有一个用 flex 创建的简单网格布局，我想要一个 3x3 块的网格，每个块之间有一个边距。

如果我添加一个边距，它会变成 2x5。

我怎样才能让它 3x3 与每个块之间的边距

.wrap{
  max-width: 1000px;
  border: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
}

.block{
  width: 33%;
  height: 100px;
  border: 1px solid red;
  margin: 5px;
}

<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

【问题讨论】：

如果你使用 32% 宽度的块，你有 3x3

标签： css flexbox

【解决方案1】：

您可以通过使用 flexbox 属性 justify-content: space-between; 获得所需的结果，该属性占用元素的剩余空间并在它们之间传播

所以我所做的只是让宽度略小于 33%，这样我们就有了剩余空间并将justify-content: space-between; 添加到包装器中

.wrap{
  max-width: 1000px;
  border: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.block{
  width: 30%;
  height: 100px;
  border: 1px solid red;
  margin-bottom: 15px;
}

<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

【讨论】：

【解决方案2】：

您可以使用calc 函数减去边距（每边10px = 5px），还可以在所有HTML 元素上指定box-sizing: border-box，这样您就不必在计算中包含边框。

* {
  box-sizing: border-box
}

.wrap{
  max-width: 1000px;
  border: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
}

.block{
  width: calc(33.3333% - 10px);
  height: 100px;
  border: 1px solid red;
  margin: 5px;
}

<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

【讨论】：