定位弹性项目

Question

我有一个包含三个 flex 项子项的 flexbox 容器。我希望第一个 div 位于左侧（flex-start），第二个需要水平居中，第三个应该位于最右侧（flex-end）。

我尝试了几乎所有可能的组合，但没有运气。

.container {
  max-width: 80%;
  background-color: #222;
  height: 80px;
  margin: 50px auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}
div:nth-of-type(1) {
  background-color: #666;
  flex-basis: 50px;
  height: 60px;
}
div:nth-of-type(2) {
  background-color: #fff;
  flex-basis: 150px;
  height: 60px;
}
div:nth-of-type(3) {
  background-color: #eee;
  flex-basis: 80px;
  height: 60px;
}

<section class="container">
  <div class></div>
  <div class></div>
  <div class></div>
</section>

Answer 1

在.container 上，您需要将justify-content 属性设置为space-between。此属性定义沿主轴的对齐方式。

.container{
  justify-content: space-between; 
}

更多信息在这里：https://css-tricks.com/almanac/properties/j/justify-content/