当 Flex 项目被其他 Flex 项目包围时，如何使容器内的 Flex 项目居中？

当被其他 Flex 项目包围时，使 Flex 项目在容器中居中

当被其他 Flex 项目包围时，使 Flex 项目在容器内居中，请考虑以下内容：

常规方法

• 使用 justify-content 和 margin: auto: 当总长度相等时在居中项目的两侧弯曲项目，这些属性可以有效地对齐它。

替代方法

• 包含和平衡长度: 将居中的项目包裹在单独的 Flex 容器中，并确保两侧同级 Flex 项目的总长度相等。这会强制居中的项目占据剩余空间并与中心对齐。

示例代码

在以下示例中，使用 h2 正确居中另一种方法，确保两侧跨度项目的总长度相等。

HTML:

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

CSS:

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

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

h2 {
  flex: 0 0 auto;
  margin: auto;
}</code>

以上是当 Flex 项目被其他 Flex 项目包围时，如何使容器内的 Flex 项目居中？的详细内容。更多信息请关注PHP中文网其他相关文章！