html - 如何对齐三个相等的水平框及其周围的空间

Question

我想把三个盒子排成一行。我正在使用 Foundation:

<div class="row">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

我希望它们是 width:32%，第一个在最左边，第二个在中间，第三个在最右边。

我试过 flexbox 的 justify-content: space-around 但外面的盒子没有在正确的位置。我尝试了列，但中间的列向左浮动。

Answer 1

您可以使用 justify-content: space-between 来做到这一点，因为它的目的就是准确地实现您想要实现的目标:

.row {
  display: flex;
  justify-content: space-between;
  border: 1px solid;
}

.box {
  flex: 0 0 32%;
  height: 20px;
  background: Aquamarine;
}

<div class="row">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>