"Dynamic" flex child 元素之间的边距相等

Question

我希望 在 three div 之间有相等的边距，即使它们是两个甚至一个，但应该 没有边距在两侧 child 如果只有一个 child 应该 没有边距 .

现在我的代码如下所示：

.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>

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

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

我不是要为 parent 提供填充。

Answer 1

这应该有效

.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>

Answer 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>

Answer 3

您只能使用下一个兄弟选择器为相邻的 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>

"Dynamic" flex child 元素之间的边距相等

Equal margin between "Dynamic" flex child elements

css

margin

flexbox