ホームページ >ウェブフロントエンド >CSSチュートリアル >Flexbox アイテムが利用可能なスペースを埋めるために伸びるのを防ぐにはどうすればよいですか?

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

How to Prevent Flexbox Items from Stretching to Fill Available Space?

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

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

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

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

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

これにより、

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

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

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

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

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

span {
  flex: 0;
}

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

続きを見る