如何将弹性项目放在最后？

Question

我希望弹性项目位于中心，只有最后一个项目位于末尾，但是当我使用 时margin-left: auto，其他项目都放在开头。

#container {
  background-color: wheat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  background-color: thistle;
  margin: 5px;
  padding: 10px;
}

.item:last-child {
  margin-left: auto;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>  
</div>

Answer 1

margin-left: auto您在最后一个弹性项目上的使用是正确的。这是将最后一个项目定位在主轴末端的一种方法。要保持其他 Flex 项目位于中心，您只需为第一个 Flex 项目指定.item:first-child自动左边距即可。现在，项目 1、2、3、4 位于导航栏中央，编号 5（最后一个项目）位于行的末尾。

#container {
  background-color: wheat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  background-color: thistle;
  margin: 5px;
  padding: 10px;
}

.item:first-child,
.item:last-child {
  margin-left: auto;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>  
</div>