Flexbox で Flex アイテムが伸びるのを防ぐにはどうすればよいですか?

Flex アイテムの伸縮の防止

Flexbox レイアウトを使用する場合、Flex アイテムが伸縮してコンテナ内の使用可能なスペースを埋める可能性があります。 。ただし、これが起こらないようにする必要がある状況もあります。

フレックス項目はなぜ伸びるのですか?

デフォルトでは、フレックス項目は主軸に沿って伸びます。コンテナの、通常は水平 (行) または垂直 (列) のいずれかです。これは、flex プロパティがデフォルトで 1 に設定されているためです。これは、アイテムが柔軟であり、利用可能なスペースを埋めるために拡張する必要があることを示しています。

Flex アイテムのストレッチの防止

flex アイテムが伸びるのを防ぐには、デフォルトの flex 値を 0 に設定して上書きします。これにより、アイテムがコンテンツに合わせて縮小し、アイテムが占有されなくなります。必要以上のスペース。

例

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

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

<div>
  <span>This is some text.</span>
</div>

この例では、フレックス項目 (スパン) ) コンテナの高さ全体を満たすまで伸びます。これを防ぐには、次のスタイルを div 要素に追加します。

align-items: flex-start;

これにより、フレックス アイテムがコンテナの先頭に沿って配置され、高さいっぱいに伸びるのを防ぎます。

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