当兄弟姐妹具有不同的宽度时，将弹性项目集中

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: 0，以便将3列均匀分布，然后您可以将文本或中间的内容集中。

我正在使用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>

Answer 2

使用嵌套的Flex容器和auto余量。

.flex-container {
  display: flex;
}
.flex-item {
  flex: 1;
  display: flex;
  justify-content: center;
}
.flex-item:first-child>span {
  margin-right: auto;
}
.flex-item:last-child>span {
  margin-left: auto;
}
/* non-essential */
.flex-item {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="flex-container">
  <div class="flex-item"><span>short</span></div>
  <div class="flex-item"><span>medium</span></div>
  <div class="flex-item"><span>lonnnnnnnnnnnnnnnnnnnng</span></div>
</div>

这是其工作原理：

• 顶级Div是一个弯曲容器。
• 每个孩子Div现在都是一个弹性项目。
• 每个项目都会给出flex: 1以平等分配容器空间。
• 现在这些项目正在消耗行中的所有空间，并且宽度相等。
• 使每个项目A(嵌套(Flex容器并添加justify-content: center。
• 现在每个span元素都是一个中心的弹性项目。
• 使用flex auto边距移动外部span s的左右。

您也可以放弃justify-content并专门使用auto。

但是justify-content可以在这里工作，因为auto边距总是具有优先级。从规格：

8.1。与auto对齐 保证金

在通过justify-content和align-self对齐之前 正空空间分布在该维度的自动边缘。