Question

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

在我的笔中，您可以看到第二项＆＃34;客户索引＆＃34;偏离中心是因为右边的内容比左边的内容要大。 如何强制它居中？

＆＃13;

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

＆＃13;

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

＆＃13;

My Codepen

Answer 1

一种方法是设置flex-grow: 1; flex-basis: 0，使3列均匀分布，然后您可以将文本或内容置于中间位置。

我使用text-align将中间列居中。您也可以使用display: flex; justify-content: center;执行相同的操作。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用嵌套的弹性容器和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，以便平均分配容器空间。
现在这些项目消耗了行中的所有空间并且宽度相等。
将每个项目设为（嵌套的）Flex容器并添加justify-content: center。
现在每个span元素都是一个居中的灵活项目。
使用flex auto页边距向左和向右移动span。

您也可以放弃justify-content并仅使用auto页边距。

但是justify-content可以在这里工作，因为auto页边距始终具有优先权。来自规范：

8.1. Aligning with auto margins

在通过justify-content和align-self进行对齐之前   正空闲空间被分配到该维度的自动边距。

当其兄弟姐妹具有不同的宽度时，将灵活项目居中

2 个答案: