css - flex box 保持 child 周围空白的正确方法是什么

Question

我有带 child 的 flex box。我正在寻找一个解决方案，知道有没有办法保持 child 周围左、右、上、下的空间？

我的尝试:左右不均匀 - 如何解决？如何确保每个 child 的顶部和底部应用相同的空间？

这是我的代码:

.container{
  display:flex;
  width:50%;
  margin:0 auto;
  border:1px solid red;
  flex-wrap: wrap;
  justify-content:space-around;
}

.child{
  width:100px;
  height:100px;
  background:gray;
  border:1px solid #fff;
}

<div class="container">
  <div class="child">01</div>
  <div class="child">02</div>
  <div class="child">03</div>
  <div class="child">04</div>
  <div class="child">05</div>
  <div class="child">06</div>
  <div class="child">07</div>
  <div class="child">08</div>
  <div class="child">09</div>
  <div class="child">10</div>
  <div class="child">11</div>
  <div class="child">12</div>
  <div class="child">13</div>
  <div class="child">14</div>
  <div class="child">15</div>
</div>

Answer 1

在没有大量目标代码的情况下，这无法在多行 flex 容器中完成。

无论是使用边距还是边框还是填充来分隔，您都必须为彼此相邻的元素、与容器相邻的元素以及每行中的第一个元素提供不同的规则。

最终，the gap property将可用于 flexbox，允许统一的排水沟。但是，CSS Grid 已经支持此属性。

.container {
  display: grid;
  grid-gap: 10px;
  padding: 10px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  width: 50%;
  margin: 0 auto;
  border: 1px solid red;
}

.child {
  background: gray;
}

<div class="container">
  <div class="child">01</div>
  <div class="child">02</div>
  <div class="child">03</div>
  <div class="child">04</div>
  <div class="child">05</div>
  <div class="child">06</div>
  <div class="child">07</div>
  <div class="child">08</div>
  <div class="child">09</div>
  <div class="child">10</div>
  <div class="child">11</div>
  <div class="child">12</div>
  <div class="child">13</div>
  <div class="child">14</div>
  <div class="child">15</div>
</div>