【CSS Modules】flex-shrinkプロパティの使い方

flex-shrinkプロパティは、CSSのFlexboxレイアウトにおいて、フレックスコンテナー内の利用可能なスペースが不足している場合に、個々のフレックスアイテムがどの程度縮小するかを制御する能力を保持するプロパティです。このプロパティは、アイテムがコンテナーに収まらない場合に、そのアイテムが他の兄弟アイテムと比べてどのくらいの割合で縮むべきかを定義します。

flex-shrinkの値は数値で指定され、初期値は1です。この数値が大きいほど、そのフレックスアイテムは他のアイテムと比較してより多く縮小されます。例えば、flex-shrink: 0を設定すると、そのアイテムは決して縮小せず、常にその内容に応じたサイズを維持しようとします。これは、コンテナーの幅がコンテンツの合計幅よりも小さい場合、アイテムがはみ出す原因となる可能性があります。

一方、flex-shrink: 1のアイテムは、利用可能なスペースが不足した場合に均等に縮小される傾向があります。複数のアイテムがある場合、flex-shrinkの値の比率に基づいて縮小量が決定されます。例えば、flex-shrink: 1のアイテムとflex-shrink: 2のアイテムがあれば、後者のアイテムは前者の2倍の割合で縮小されます。

このプロパティは、ウェブサイトやアプリケーションが様々な画面サイズに対応するレスポンシブデザインにおいて非常に重要です。要素がコンテナーに適切に収まり、レイアウトが崩れないようにするために使用されます。flex-shrinkは、flex-grow（拡大能力）やflex-basis（初期サイズ）と合わせて、Flexboxの柔軟なレイアウトを構築するための基本的なプロパティの一つです。

Copy
1.flex-item {
2  flex-shrink: 0;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません