如何讓 Flexbox 項目換行到多行，同時保持比例大小？

Flexbox：在多行中顯示項目

在 Flexbox 中，實現多行佈局可能具有挑戰性。考慮這樣一個場景，其中八個項目預計會動態調整大小並對齊在兩行中，每行四個項目。要解決這個問題，需要進行一些關鍵調整。

首先，確保將 flex-wrap 設定為在容器元素上換行。這會覆蓋預設的 nowrap 設置，允許項目分成多行。

但是，主要障礙在於分配給 Flex 項目的 flex-grow: 1 屬性。雖然此屬性按比例分配可用空間，但它可能會妨礙換行。由於 Flex 項目中沒有內容，它們將縮小到零寬度並保持在一行上。

解決方案是指定項目的寬度。透過應用 flex: 1 0 21%;，項目將：

• Flex: 1 - Flex 項目將彎曲以填充可用空間。
• 0 - Flex 項目的最小寬度為零，允許它們收縮。
• 21% - Flex 項目的首選寬度為 21%，確保它們容納內容並在容器內均勻分佈。

以上是如何讓 Flexbox 項目換行到多行，同時保持比例大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！