设置弹性盒项目之间距离的更好方法

Question

为了设置 flexbox 项目之间的最小距离，我在 .item 和 margin: 0 -5px 上使用了 margin: 0 5px 。对我来说，这似乎是一个 hack，但我找不到更好的方法来做到这一点。

 #box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}

 <div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

原文由 Sasha Koss 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

• Flexbox 没有折叠边距。
• Flexbox 没有任何类似于 border-spacing 的表格（编辑： CSS 属性 gap 在较新的浏览器中扮演这个角色， 我可以使用吗）

因此，实现你所要求的有点困难。

In my experience, the “cleanest” way that doesn’t use :first-child / :last-child and works without any modification on flex-wrap:wrap is to set padding:5px 在容器上和 margin:5px 在孩子上。这将在每个孩子之间以及每个孩子与其父母之间产生一个 10px 差距。

演示

 .upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

 <div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

原文由 user652649 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

CSS gap 属性：

有一个新的 gap 多列、弹性框和网格布局的 CSS 属性 现在可以在较新的浏览器中使用！ （请参阅我可以使用 链接 1 吗； 链接 2 ）。它是 row-gap 和 column-gap 的简写。

 #box {
  display: flex;
  gap: 10px;
}

CSS row-gap 属性：

row-gap flexbox 和网格布局的 CSS 属性 允许您在行之间创建间隙。

 #box {
   display: flex;
   row-gap: 10px;
}

CSS column-gap 属性：

column-gap 多列、弹性框和网格布局的 CSS 属性 允许您在列之间创建间隙。

 #box {
  display: flex;
  column-gap: 10px;
}

例子：

 #box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  border: 1px black solid;
}

 <div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

原文由 Flimm 发布，翻译遵循 CC BY-SA 4.0 许可协议