＆＃34;动态＆＃34;之间的平等差距flex子元素

Question

我想在three div之间等边距，即使它们是两个甚至一个但是双方孩子应该没有边距，如果它＆ ＃39;只有一个孩子应该没有保证金。

现在我的代码如下：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我想要的是中间的边距应该相等，但是在包裹的两侧不应有边距

我不打算给父母填充。

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

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

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

Answer 3

使用justify-content:space-between作为复选框

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;