使用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居中，而其他项目保持在两侧，就像这张图片一样：

它们在flex行中工作正常，但如果端点的宽度不同，则中间的项目不会保持居中。我最好让plz-center固定吗？

- Nick Tassone

---

两种方法。请参见此处的方框#71-78：当相邻项大小不同时居中一个flex项目 - Michael Benjamin

@Michael_B 哇，这是一个不可思议的资源，感谢您的链接！ - Nick Tassone

Answer 1

一个简单的解决方案是给第一个盒子设置margin-right:auto，给最后一个盒子设置margin-left:auto，flex-box会自动计算间距。

更复杂的解决方案通常在构建网格系统时由网站使用，即将每个flex-item包装在另一个DIV中，该DIV也是一个flex-box。然后使这些新的flex-box等份地共享主包装flex-box的宽度（每个宽度的1/3）。然后在每个盒子内部按需定位元素。这里有一个示例（我已经在新的包装flex-box周围留下了黑色边框，以便您更好地看到其行为）：

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>

- Dylan Stark

---

这个很好用，谢谢！如果需要更详细的答案，请查看@Michael_B在他上面的评论中提供的链接。 - Nick Tassone

@NickTassone 哇，有很多信息，非常有用！ - Dylan Stark