柔化物品均匀间隔但第一项对齐左侧

Question

Flexbox justify-content: space-around使我的列表项水平均匀分布.有没有办法让完全相同的东西,唯一的区别是左边的第一个项目左边没有空格？(即,列表从容器的左边缘"开始")

Answer 1

而不是使用justify-content: space-around,使用auto项目的边距.

通过给出每个弹性项目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演示

auto在这里了解有关flex margin的更多信息:在CSS Flexbox中,为什么没有"justify-items"和"justify-self"属性？

Answer 2

您可以使用justify-content: space-between，但是最后一个内容在右侧也将没有空格。

一个好的文档。