當 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中文網其他相關文章！