Question

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

此处有更多信息：https://css-tricks.com/almanac/properties/j/justify-content/

定位弹性项目

1 个答案: