弹性框子边距右边距不适用

Question

我想为flexbox的孩子创造平等的差距。我为每个孩子使用边距右边距零，然后将边距重新应用于最后一个孩子。但是边距权利不知何故不适用。滚动到孩子的末尾后，您可以看到。

请参阅下面的演示

.flex {
  display: flex;
  background: pink;
  width: 80px;
  overflow: auto;
}
.item {
  min-width: 20px;
  height: 20px;
  background: black;
  margin: 8px;
  margin-right: 0;
}
.item:last-child {
  margin-right: 4px;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

添加另一个父div并为父div提供溢出。对于.flex类应用display:inline-flex;那么它将起作用

.flex-parent{
  overflow: auto;
  width: 80px;
}
.flex {
  display: flex;
  background: pink;
  min-width:100%;
  float:left;
}

.flex-parent{
  overflow: auto;
  width: 80px;
}
.flex {
  display: inline-flex;
  background: pink;
  /*min-width:100%;
  float:left;*/
}
.item {
  min-width: 20px;
  height: 20px;
  background: black;
  margin: 8px;
  margin-right: 0;
}
.item:last-child {
  margin-right: 4px;
}

<div class="flex-parent">
 <div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
 </div>
</div>

Answer 2

.flex {
  display: flex;
  background: pink;
  width: 200px;
  overflow: auto;
justify-content: space-between;
}
.item {
  min-width: 20px;
  height: 20px;
  background: black;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>