Flexbox アイテムが適切にラップされないのはなぜですか?

フレックス項目の折り返しのトラブルシューティング

フレックスボックスを使用して同じ高さの要素の複数行を作成すると、項目が適切に折り返されないという問題がよく発生します。 。これは、フレックス コンテナのデフォルトの動作がラッピングを禁止することになっているために発生します (flex-wrap: nowrap)。

ラッピングを有効にするには、flex-wrap を Wrap に設定します。

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

フレックスコンテナについてプロパティ:

• display: flex: 要素をフレックス コンテナーとして初期化し、項目を 1 つの行または列に配置します。
• flex-wrap:wrap: 内で項目をラップできるようにします。 container.
• flex-wrap:nowrap: 項目が折り返されず、単一行に制限されます。

例:

同じ高さの 3 つの行を作成する次の例を考えてみましょう。正方形:

#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 中国語 Web サイトの他の関連記事を参照してください。