如何僅使用 CSS 將中間方塊置於大小不等的側框之間？

保持中間項在不相等的側面項中居中

簡介

在設計涉及不同寬度的並排框的佈局時，一個常見的挑戰是保持中間框的居中。本文探討了實現此效果的 CSS 解決方案。

使用Flexbox 的CSS 解

要讓中間框居中而不管側框的寬度如何，我們可以利用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;
}

主要特點

• 純CSS： 不需要額外的函式庫或JavaScript。
• 無絕對定位： 元素使用 Flexbox 定位，無需絕對定位。
• 動態對齊：無論邊寬如何，中間框保持居中

實現細節

• .container 是一個包裝所有三個.box 元素的Flexbox。
• 每個 .box 也是一個 Flexbox，使用 justify-content: center 水平對齊其內部內容。
• flex: 1 導致每個 .box 都會成長以均勻地填充可用空間。
• 內部元素上的邊距確保側框的邊緣始終接觸其容器的邊緣。
• 自動邊距擴展或根據需要縮小以保持中間框的居中對齊。

以上是如何僅使用 CSS 將中間方塊置於大小不等的側框之間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！