“动态”弹性子元素之间的相等边距答案

【问题标题】：Equal margin between "Dynamic" flex child elements“动态”弹性子元素之间的相等边距
【发布时间】：2018-01-04 09:34:06
【问题描述】：

我希望 three div 之间 相等的边距，即使它们是两个或什至一个，但两边的孩子应该有 没有边距，如果它只有一个孩子应该有没有边距。

现在我的代码如下：

.parent {
  display: flex;
  height: 120px;
  background: #000;
  box-sizing: border-box;
}

.child {
  height: 100px;
  background: #ddd;
  flex: 1;
}

.child:nth-child(2),
.child:last-child {
  margin: 10px 0 10px 10px;
}

.child:first-child {
  margin: 10px 0;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

我正在使用上面的代码得到我想要的结果。但我想知道是否有更好的方法来获得这个结果。

我想要的是中间的边距应该相等，但环绕的两侧不应该有边距

我不是要为父级提供填充。

【问题讨论】：

您的“提示”并不正确。我在没有前缀的 iPad 上使用 flexbox，甚至是网格布局。在此处查看浏览器支持：caniuse.com/#search=flex
@Michael_B 我的提示来源来自 - w3schools.com/cssref/pr_class_display.asp。所以我不确定w3schools 可能是错的！！
显然他们错了，因为 flexbox 在我所有的 iOS 设备上都在 Safari 上工作，没有前缀。
是的，你说得对，我检查了我的大学 MacBook。我更新了我的Q :)

标签： css flexbox margin

【解决方案1】：

您只能使用下一个兄弟选择器为相邻的 child 块添加 margin-left。演示：

.parent {
  display: flex;
  margin-bottom: 1em;
  background: #000;
}

.child {
  height: 50px;
  background: #ddd;
  flex: 1;
  margin-top: 10px;
  margin-bottom: 10px;
}

.child + .child {
  margin-left: 10px;
}

<div class="parent">
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

【讨论】：

【解决方案2】：

在复选框中使用justify-content:space-between

.parent {
  display: flex;
  height: 120px;
  background: #000;
  box-sizing: border-box;
  justify-content: space-between;
}

.child {
  height: 100px;
  background: #ddd;
  flex: 1;
}

.child:nth-child(2),
.child:last-child {
  margin: 10px 0 10px 10px;
}

.child:first-child {
  margin: 10px 0;
}

<div class="parent">
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

【讨论】：

【解决方案3】：

这应该可以工作

.parent {
  display: flex;
  margin-bottom: 1em;
  background: #000;
  box-sizing: border-box;
  justify-content: space-between;
}

.child {
  height: 50px;
  background: #ddd;
  flex: 1;
  margin: 10px 5px;
}

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

.child:first-child {
  margin-left: 0;
}

.child:only-child {
  margin: 10px 0;
}

<div class="parent">
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

【讨论】：