如何將 Flexbox 佈局中的中間項與尺寸不均勻的側邊項居中？-css教學-PHP中文網

如何將 Flexbox 佈局中的中間項與尺寸不均勻的側邊項居中？

Patricia Arquette

發布： 2024-12-21 03:43:08

原創

402 人瀏覽過

How Can I Center a Middle Item in a Flexbox Layout with Unevenly Sized Side Items?

在不同的側項寬度中居中居中

在 Flexbox 佈局中，當側項具有不同的寬度。為了解決這個問題，我們可以利用具有自動邊距的巢狀彈性容器。

這種方法背後的關鍵概念是：

使用嵌套彈性容器可確保項目在內部和之間分佈根據需要調整框。
對左側和右側框中的內部容器應用自動邊距會自動調整位置以居中item.

以下是演示此技術的代碼：

.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;
}

/* non-essential */
.box {
  align-items: center;
  height: 40px;
}

.inner {
  background: pink;
  border: 1px solid deeppink;
  padding: 0 5px;
}

p {
  text-align: center;
  margin: 5px 0 0 0;
}

登入後複製

在此程式碼中，容器被設定為彈性盒，並且盒子是彈性項目，其彈性比率為1. 每個盒子都使用嵌套的彈性盒子來居中其內容。

關鍵步驟是在第一個和最後一個內部容器中設定自動邊距盒子。對於左側，margin-right: auto;自動調整元素右側的空間，而margin-left: auto;在左側做同樣的事情。這可以確保居中框保持居中，無論側框的寬度如何。

透過使用此方法，即使側項具有不同的寬度，您也可以實現中間項的真正居中。

以上是如何將 Flexbox 佈局中的中間項與尺寸不均勻的側邊項居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！