css - Flex 元素均匀间隔但第一个元素左对齐

Question

Flexbox 的 justify-content: space-around 使我的列表项水平均匀分布。有没有办法得到完全相同的东西，唯一的区别是左边的第一项在左边没有空间？ (也就是说，列表从容器的左边缘“开始”)

Answer 1

不使用 justify-content: space-around，而是在元素上使用 auto 边距。

通过给每个 flex 元素 margin-right: auto，容器空间将在元素之间平均分配(如 justify-content)，但第一个元素将保持在左边界边缘。

flex-container[one] {
  display: flex;
  justify-content: space-around;
  border: 1px dashed green;
}

flex-container[one]>flex-item {
  background-color: lightgreen;
}

flex-container[two] {
  display: flex;
  border: 1px dashed red;
}

flex-container[two]>flex-item {
  margin-right: auto;
  background-color: orangered;
}

flex-item {
  width: 50px;
  height: 50px;
}

<code>justify-content: space-around</code>
<flex-container one>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

<br>

<code>margin-right: auto</code>
<flex-container two>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

jsFiddle demo

在此处了解有关 flex auto 边距的更多信息:In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?