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