如何將容器中的 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中文網其他相關文章！