Flexbox アイテムが利用可能なスペースを埋めるために伸びるのを防ぐにはどうすればよいですか?

フレックスボックス項目のストレッチ: 解決策と考慮事項

フレックスボックス レイアウトでは、フレックス項目自体のコンテンツが多くても、利用可能なスペースを満たすためにフレックス項目がストレッチされる可能性があります。より小さい。これは、特定の状況で問題になる可能性があります。

アイテムのストレッチの根本原因

この例では、次の CSS により、要素はフレックス コンテナ

の高さまで引き伸ばされます。

div {
  display: flex;
  height: 200px;
}

これにより、

が設定されます。をフレックスコンテナとして作成し、高さを 200px に設定します。 以来、要素は唯一のフレックス アイテムであり、利用可能なスペース全体を埋めるように自動的に引き伸ばされます。

アイテムの引き伸ばしの防止

フレックス アイテムの引き伸ばしを防止するには、主に 2 つの方法があります:

1. align-items プロパティを設定します。 align-items を flex-start に設定すると、整列します。コンテンツのサイズに関係なく、すべての flex アイテムがコンテナーの上部に配置されます。これにより、項目が垂直に伸びることはなくなります。

div {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

2. flex プロパティを使用する: flex プロパティを使用して、個々の flex 項目の柔軟性を制御できます。デフォルトでは、すべての flex 項目の flex 値は 1 です。これは、使用可能なスペースを埋めるために伸縮することを意味します。アイテムが伸びるのを防ぐには、フレックス値を 0 などの低い数値に設定します。

span {
  flex: 0;
}

以上がFlexbox アイテムが利用可能なスペースを埋めるために伸びるのを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。