Flex コンテナ内で Flex アイテムが不必要に伸びるのを防ぐにはどうすればよいですか?

フレックス項目が不必要に伸びるのを防ぐ方法

フレックス コンテナ内で要素をネストする場合、子要素がコンテナの高さ全体を埋めるように伸びる状況がよく発生します。たとえ最小限のコンテンツしか含まれていないとしても。これは、特に特定の flex アイテムのサイズを制御したい場合には望ましくない場合があります。

問題について

デフォルトでは、flex アイテムはコンテナの高さ全体を占めるように伸縮します。これは、align-items プロパティがストレッチに設定されているために発生します。これは、コンテナが子要素間で利用可能なスペースを均等に分配し、子要素が垂直方向に伸びることを意味します。

Flex アイテムの伸縮を防ぐ

特定の Flex アイテムが伸びるのを防ぐには、次のように調整できます。 align-items プロパティ。これを達成するための 2 つのアプローチを次に示します。

1. align-items: flex-start をフレックス コンテナに適用します

フレックス コンテナに align-items: flex-start を設定することで、コンテナの上部に項目を配置するようにブラウザに指示します。これは、高さ全体を満たすように伸びることがなくなることを意味します。

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}

2.特定のフレックス項目で flex-shrink: 0 を使用する

特定のフレックス項目が伸びるのを防ぎ、残りのスペースを他の項目で埋めることができるようにしたい場合は、flex-shrink プロパティを使用できます。目的の項目に flex-shrink: 0 を設定すると、元のサイズを超えて縮小 (および伸長) することがなくなります。

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

span {
  background: red;
  flex-shrink: 0;
}

以上がFlex コンテナ内で Flex アイテムが不必要に伸びるのを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。