如何将容器中的 Flex 项目与其他 Flex 项目一起居中？

将容器内的 Flex 项目与其他 Flex 项目集中对齐

Flex 对齐属性分配容器内未占用的空间。因此，除非相邻项目的组合宽度等于容器的宽度，否则不可能自动将被其他项目包围的弹性项目居中。

考虑提供的第二个示例。 h2 元素两侧的 span 元素的总宽度相等。因此，h2 完全位于容器的中心。

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

p {
  text-align: center;
}

p > span {
  background-color: aqua;
  padding: 5px;
}</code>

<code class="html"><div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
  <h2>I'm an h2</h2>
  <span>I'm span 4</span>
  <span>I'm span 5</span>
  <span>I'm span 6</span>
</div>
<p><span>TRUE CENTER</span></p></code>

以上是如何将容器中的 Flex 项目与其他 Flex 项目一起居中？的详细内容。更多信息请关注PHP中文网其他相关文章！