挑戰：
將
將 居中在彈性容器內，同時被不同數量的 包圍。
方法：
由於彈性對齊屬性會分配容器內的可用空間，因此在不採取額外措施的情況下，將單一項目置於不均勻的同級元素中居中是一項挑戰。
考慮：
當周圍元素的總長度為
解決方案：
<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中文網其他相關文章！
