帶有不對稱側框的居中中間項目
目標是當中間項目的相鄰項目具有不同寬度時，將中間項目置於容器中居中，無論內容溢出如何，都保持正確的對齊方式。
使用Flexbox
Flexbox提供了使用嵌套容器和自動邊距的解決方案：
.container {
display: flex;
}
.box {
flex: 1;
display: flex;
justify-content: center;
}
.box:first-child > div { margin-right: auto; }
.box:last-child > div { margin-left: auto; }說明：
範例：
<div class="container"> <div class="box"><div class="inner">short box</div></div> <div class="box"><div class="inner">centered box</div></div> <div class="box"><div class="inner">looooooooooooooooooooooong box</div></div> </div> <p>→ true center</p>
這種方法對齊中間元素無論側框的寬度如何，即使內容溢出。
以上是如何使側邊箱不均勻的 Flexbox 容器中的中間項居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
