如何使側邊箱不均勻的 Flexbox 容器中的中間項居中？

帶有不對稱側框的居中中間項目

目標是當中間項目的相鄰項目具有不同寬度時，將中間項目置於容器中居中，無論內容溢出如何，都保持正確的對齊方式。

使用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; }

說明：

• 最外層容器是水平拉伸的彈性容器。
• 每個「盒子」元素也是一個彈性容器，其內容居中。
• 「margin-right: auto;」第一個框的內部元素將其向右推向容器邊緣，有效地將其與左側對齊。
• 「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中文網其他相關文章！