如何讓 Flexbox 項目佔據相同的寬度？

均勻分佈Flexbox 項目

Flexbox 作為一種多功能佈局方法而廣受歡迎，但它傾向於均勻分佈項目周圍的空間，而不是均勻分佈項目周圍的空間。物品本身。為了應對這項挑戰，讓我們探索一種解決方案，以確保所有 Flexbox 專案佔據相同的寬度。

Flexbox 的運作原理是根據專案的 flex-grow 屬性來增加和縮小專案。預設情況下，flex-grow 設定為 0，導致項目以其自然寬度進行渲染。但是，我們可以修改此屬性來實現我們想要的結果。

要建立具有相等寬度的項目，請將其 flex-basis 設為 0。這為所有元素建立了一個共同的起點。此外，透過將 flex-grow 設定為 1 來允許專案成長。這將確保它們均勻擴展以填充可用空間。

以下CSS 程式碼示範了這種方法：

.header {
  display: flex;
}

.item {
  flex: 1 1 0px;
  text-align: center;
  border: 1px solid black;
}

透過將flex-basis 設定為0 並將flex-grow 設定為1，.item 類別中的所有項目將具有相同的空間量，無論其內容為何。這消除了原始範例中觀察到的不均勻分佈。

注意：某些 IDE 和 linter 可能建議省略 flex 中的「px」單位。但是，保留它可以確保在 Internet Explorer 中正確呈現。

以上是如何讓 Flexbox 項目佔據相同的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！