如何將 Flexbox 項目強制放入兩個特定行？

Flexbox：以兩行顯示項目

在Flexbox 中，您可以透過在容器上設定flex-wrap:wrap 輕鬆地將項目分佈在多行中。但是，要強制將項目放入特定的行中，您需要控制元素的大小和間距。

動態調整項目大小的問題

在提供的程式碼中，您有8 個帶有flex 的項目-grow: 1，這意味著每個項目將嘗試佔用盡可能多的可用空間。這可能會阻礙所需的兩行佈局。

解決方案：控制項目寬度

要建立兩行，每行四個項目，您需要為子元素定義固定寬度。修改子樣式如下：

.child {
  flex: 1 0 21%; /* Adjust the percentage as needed */
}

• flex: 1 0 21%:

  • 1：將flex-grow 設為1，讓項目to
  • 0：將flex-shrink設定為0，防止項目縮小超過21% width
  • 21%：指定每個項目的初始寬度（您可能需要稍微調整這個值）

同時使用flex-wrap 和定義了項目寬度後，您的項目現在將整齊地排列成兩行，每行四個。

以上是如何將 Flexbox 項目強制放入兩個特定行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！