如何建立每行四個項目的兩行 Flexbox 網格？

Flexbox：建立每行四個項目的兩行網格

Flexbox 提供了強大的佈局系統，用於創建動態和響應式網頁。一個常見的用例是建立一個類似網格的佈局，隨著視窗大小的變化自動包裝其項目並調整其大小。

問題：將項目包裝成多行

在您的特定場景中，您面臨的問題是您的Flexbox 容器在一行中顯示八個項目，而不是將它們分成兩行，每行四個項目

解決方案：了解Flexbox屬性

為了強制將項目分成兩行，我們需要調整兩個 Flexbox 屬性：flex-wrap 和 flex-grow。

flex-wrap：包裹

flex-wrap 屬性控制容器中的項目是否可以換行以形成多行。透過將其設為換行，您可以允許項目根據需要流到新行。

flex-grow: 1

flex-grow 屬性控制如何物品在容器內分配多餘的空間。值為 1 表示每個項目將按比例增長以填充其行上的可用空間。

問題：覆蓋預設值

在原始程式碼中，flex -wrap 設定為換行，但 Flex 專案上的 flex-grow 設定為 1。這導致項目成長到佔據整個可用寬度，從而阻止它們包裹。

修復：定義項目寬度

要解決此問題，我們需要為項目定義特定的寬度，以便它們不會過度增長並強制包裝。在修正後的程式碼中，我們使用了具有三個值的flex 屬性：

1. flex: 1 0 21%; - 第一個值(1) 將項目的成長因子設為1 ，與flex-grow: 1 相同。
2. flex: 1 0 21%; - 第二個值 (0) 將項目的收縮係數設為 0，這表示它不會收縮到指定寬度以下。
3. flex: 1 0 21%; - 第三個值 (21%) 將項目的初始寬度設定為容器寬度的 21%。

透過定義項目的寬度，我們確保它們適當地包裝成兩行，每行四個項目。

以上是如何建立每行四個項目的兩行 Flexbox 網格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！