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

前の記事：CSS3 フィルターで画像をぼかすときにエッジを鮮明に保つにはどうすればよいですか? 次の記事：幅 50% のインラインブロック列が次の行に折り返されるのはなぜですか?

このウェブサイトの声明

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

著者別の最新記事

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2857

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

2994

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

2490

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

2423

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

2466

関連トピック

詳細>

• 携帯電話暗号化ソフト
• htmlの整形方法
• メタバース コンセプト ストックとは何ですか?
• C# とはどういう意味ですか?
• サーバーリクエストタイムアウトソリューション
• 正規表現には以下が含まれません
• トランザクションスコープの使い方
• MongoDBのデータを削除する方法