当其兄弟姐妹的宽度不同时，将其居中

Question

我知道flexbox为居中项提供了一个很好的解决方案。但是，当我有3个项目并且无论其他2个项目的大小如何，我都希望中心（第二个）项目相对于窗口居中时，我遇到了一个问题。

在我的笔中，您可以看到第二个项目“客户索引”偏离中心，因为右侧的内容大于左侧的内容。 我如何强迫它居中？

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

<div class="flex">
  <span style="font-size:12px;">small</span>
  <span style="font-size:20px;">Client Index</span>
  <span style="font-size:18px;">Lots of content that moves the center</span>
</div>

我的Codepen

Answer 1

一种方法是设置flex-grow: 1; flex-basis: 03列均匀分布，然后将文本或内容居中。

我正在text-align居中居中。您也可以display: flex; justify-content: center;用来做同样的事情。

.flex { 
  display: flex; 
  align-items: center;
  justify-content: space-between;
}
.flex > span {
  flex: 1 0 0;
}
.flex > span:nth-child(2) {
  text-align: center;
}

<div class="flex">
  <span style="font-size:12px;">small</span>
  <span style="font-size:20px;">Client Index</span>
  <span style="font-size:18px;">Lots of content that moves the center</span>
</div>