如何將 Flex 項目置於周圍元素不均勻的容器中？

將容器中的Flex 專案與其他Flex 專案居中

挑戰：

將

挑戰：

將

居中在彈性容器內，同時被不同數量的 包圍。

方法：

由於彈性對齊屬性會分配容器內的可用空間，因此在不採取額外措施的情況下，將單一項目置於不均勻的同級元素中居中是一項挑戰。

考慮：

當周圍元素的總長度為

解決方案：

<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></code>

<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 空間分佈中排除。邊距自動確保

位於其

的中心

其他見解：
• 元素在其各自的
  內居中。由於文字對齊屬性，容器。 雖然這種方法將

  居中，但完美，如果周圍內容的長度是動態的，它可能不適合。

以上是如何將 Flex 項目置於周圍元素不均勻的容器中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！