Html 使用flexbox将特定元件与其他元件居中

我在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>

.flex容器{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
50px的计算宽度
计算宽度为25px
计算宽度为150px

我想将中间的项目居中放置

plz center

，让其他项目保持在两侧，如下图所示：

---

它们在弹性行中工作良好，但如果末端项目的宽度不同，中间项目不会保持居中。我是否最好将

plz中心

固定？

解决此问题的一个简单方法是将第一个框的

边距设置为右：自动

，最后一个框的

边距设置为左：自动

，弹性框将为您整理其余框并计算间距

一个更复杂的解决方案通常由网站在构建网格系统时使用，它是将这些flex项包装在另一个DIV中，该DIV也是flex box。然后使这些新的柔性包装盒与主包装柔性包装盒的宽度相等（每个宽度的1/3）。然后在每个框内，您可以根据需要定位元素。下面是一个示例（我在新的包装柔性框周围留下了黑色边框，以便您更好地了解其行为）：

正文{
保证金：0；
}
.柔性容器{
显示器：flex；
对齐项目：居中；
}
.1，
.2，
.flex3{
显示器：flex；
弹性：110；
边框：1px纯黑；
}
.flex2{
证明内容：周围的空间；
}
.flex3{
证明内容：柔性端；
}
.弹性项目{
宽度：50px；
高度：50px；
背景：橙色；
}
.flex-item.plz-center{
宽度：25px；
}
.flex-item.big{
宽度：150px；
}

两种方法。请参见方框71-78：@Michael#B哇，难以置信的资源，感谢链接！这很好用，谢谢！要获得更详细的答案，请查看@Michael_B上面评论中的链接。@NickTassone那里有很多信息，非常有用！