flexbox子保证金权利未应用

Question

我想为flexbox的孩子分配相等的空隙。我为每个孩子使用了margin-right 0，然后将margin-right应用于最后一个孩子。但是保证金权利不适用。滚动到孩子的末端，您可以看到。

请参阅下面的演示

.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提供溢出。对于SELECT EXISTS(SELECT 1 from table1 where Id = 1) as 'Exists'; 类，请应用.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;
}

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>