為什麼我的 Flexbox 商品無法正確包裝？

Flex 專案環繞問題排查

使用 Flexbox 建立多行等高元素時，通常會遇到項目未正確環繞的問題。發生這種情況是因為 Flex 容器的預設行為是防止換行（flex-wrap: nowrap）。

要啟用換行，請將flex-wrap 設定為換行：

#list-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

了解Flex 容器屬性:

了解Flex 容器屬性:
• 以>
• display: flex:將元素初始化為 Flex 容器，對齊單行或單列中的項目。
• flex-wrap:wrap: 讓專案在

flex-wrap: nowrap:

防止項目換行，將它們限制在一行中。

範例：

#list-wrapper {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
}

#list-wrapper div {}

#list-wrapper div img {
  height: 150px;
  width: 150px;
}

<div>

考慮以下範例來建立三行，每行三個等高方塊：

以上是為什麼我的 Flexbox 商品無法正確包裝？的詳細內容。更多資訊請關注PHP中文網其他相關文章！