フレックス項目が複数の行に折り返されないのはなぜですか?

Flex アイテムがラップされないのはなぜですか?

Flex コンテナ内に複数行の要素を作成しようとしたときに、代わりにそれらはすべて 1 つのオーバーフロー行に限定されています。おそらくデフォルトの flex-wrap が原因です。 property.

デフォルトの flex-wrap 動作

デフォルトでは、flex コンテナの flex-wrap プロパティは nowrap に設定されています。これは、すべての子要素 ​​(「フレックス項目」) が全体の幅に関係なく、単一行に制限されることを意味します。その結果、フレックス アイテムの合計幅が親コンテナの幅を超えると、フレックス アイテムはオーバーフローして同じ行に表示されます。

問題の修正: flex-wrap を Wrap

に設定します。

フレックス項目を複数行に折り返せるようにするには、flex-wrap プロパティを次のように設定する必要があります。 ラップ。これにより、要素が自然に流れるようになり、コンテナーの幅に達したときに、ある行から次の行に折り返されます。包む： Wrap;

}

フレックス ラッピングの例

次の例を考えてみましょう:

< ;pre>

.container {

表示: flex;

flex-wrap: Wrap;

幅: 600px;

}

.item {
幅: 200px;
高さ: 200px;
背景色: 青;

マージン: 5px;

}


このコードは、600px の固定幅のフレックス コンテナを作成します。このコンテナ内には、それぞれ幅 200 ピクセルの 3 つの flex アイテムがあります。 flex-wrap をラップに設定すると、フレックス アイテムはコンテナの幅に収まるように自動的に折り返されます。

要約すると、フレックス アイテムが複数行に折り返されるようにするには、flex-wrap プロパティが明示的に設定されていることを確認してください。包むこと。こうすることで、容器の寸法内で自然に流れることができます。

以上がフレックス項目が複数の行に折り返されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。