如何將中間元素置於動態大小的同級元素之間？

使用動態同級寬度將中間元素居中

想像一個佈局，由三個水平對齊的框組成，點代表它們之間的間距：

[Left box]......[Center box]......[Right box]

當其中一個側框被移除時，中心框應保留居中：

[Left box]......[Center box].................

同樣，當另一個側框被移除時：

................[Center box].................

此外，中心框內容應擴展以填充可用空間，而側框保持固定在尺寸。溢出將使用溢出：隱藏和文字溢出：省略號來處理以剪輯內容。

[Left box][Center boxxxxxxxxxxxxx][Right box]

雖然 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; }

此策略使用自動邊距自動居中中間項目，無論側框的寬度如何。調整內容：居中；對齊確保中間框中的內容保持居中。

透過嵌套彈性容器，我們限制了各個框的邊距，防止它們影響其他元素的佈局。即使側框的寬度差異很大，此方法也能實現真正的居中。

以上是如何將中間元素置於動態大小的同級元素之間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！