如何将 Flex 项目置于周围元素不均匀的容器中？

将容器中的 Flex 项目与其他 Flex 项目居中

挑战：

将

居中在弹性容器内，同时被不同数量的 包围。

方法：

由于弹性对齐属性会分配容器内的可用空间，因此在不采取额外措施的情况下，将单个项目置于不均匀的同级元素中居中是一项挑战。

考虑：

当item两侧周围元素的总长度相等时，居中就成为可能。

解决方案：

将

包裹起来在其

内

<code class="html"><div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <div>
    <h2>I'm an h2</h2>
  </div>
  <div>
    <span>I'm span 3</span>
  </div>
</div></p>
<pre class="brush:php;toolbar:false"><code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container div {
  flex: 1 1 auto;  // Equalize flex sizing
  text-align: center;
}

h2 {
  flex: 0 0 auto;  // Prevent h2 from affecting flex sizing
  margin: auto;   // Center within its container
}</code>

登录后复制

说明：

通过设置内部

的flex属性将容器设置为“1 1 auto”，它们在弹性容器内占据相同的空间。

的 Flex 属性设置为“0 0 auto”，将其从 Flex 空间分布中排除。边距自动确保

位于其

的中心

其他见解：

• 元素在其各自的
  内居中。由于文本对齐属性，容器。
• 虽然这种方法将

  居中，但完美，如果周围内容的长度是动态的，它可能不适合。