フレックス アイテムの伸縮を防ぐ

フレックスボックス レイアウトを使用すると、フレックス アイテムが伸縮してコンテナ内の利用可能なスペースを埋める可能性があります。 。ただし、状況によっては、このような事態が起こらないようにしたい場合があります。

フレックス アイテムが伸びるのはなぜですか?

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

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

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

例

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

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

  This is some text.

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

align-items: flex-start;

これにより、フレックス項目がコンテナの先頭に沿って整列され、コンテナの先頭に伸びるのを防ぎます。高さ全体を埋めてください。