使用 Flexbox 将特定元素居中

Question

我在 Flexbox 中有一个包含三个元素的布局，如下所示：

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="flex-container">
  <div class="flex-item"> computed width of 50px </div>
  <div class="flex-item plz-center"> computed width of 25px </div>
  <div class="flex-item"> computed width of 150px </div>
</div>

我想将中间的项目居中plz-center，并将其他项目保留在两侧，如下图所示：

它们在弹性行中工作正常，但如果最终项目的宽度不同，则中间项目不会保持居中。我最好plz-center修复一下吗？

Answer 1

这个问题的一个简单的解决方案是给你的第一个盒子margin-right:auto和最后一个盒子margin-left:auto，弹性盒子会整理其余的并为你计算间距。

网站在构建网格系统时经常使用的更复杂的解决方案是将每个弹性项目包装在另一个也是弹性盒的 DIV 中。然后使这些新的弹性盒平均共享主包装弹性盒的宽度（每个弹性盒宽度的 1/3）。然后，您可以根据需要在每个框中放置元素。这是一个示例（我在新的包装弹性盒周围留下了黑色边框，以便您可以更好地看到其行为方式）：

body {
  margin: 0;
}
.flex-container {
  display: flex;
  align-items: center;
}
.flex1,
.flex2,
.flex3 {
  display: flex;
  flex: 1 1 0;
  border: 1px solid black;
}
.flex2 {
  justify-content: space-around;
}
.flex3 {
  justify-content: flex-end;
}
.flex-item {
  width: 50px;
  height: 50px;
  background: orange;
}
.flex-item.plz-center {
  width: 25px;
}
.flex-item.big {
  width: 150px;
}

<div class="flex-container">
  <div class="flex1">
    <div class="flex-item"></div>
  </div>
  <div class="flex2">
    <div class="flex-item plz-center"></div>
  </div>
  <div class="flex3">
    <div class="flex-item big"></div>
  </div>
</div>