【CSS Modules】flex-growプロパティの使い方
flex-growプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
flex-growプロパティは、CSSのFlexboxレイアウトモデルにおいて、フレックスコンテナ内のフレックスアイテムが利用可能な余白をどのように占有するか、その成長率を制御するプロパティです。このプロパティに数値を指定することで、アイテムがその初期サイズを超えてどれだけ拡大できるかを定義します。
具体的には、フレックスコンテナ内に複数のフレックスアイテムが存在し、それらのアイテムが初期サイズを合計してもコンテナの幅や高さを満たさない場合、余分なスペース（余白）が発生します。flex-growプロパティは、この余白を各アイテムがどのくらいの比率で分配して占有するかを決定します。
デフォルト値は0であり、この場合、アイテムは余白を占有せず、指定された幅やコンテンツの大きさに従って成長しません。一方、1や2といった正の数値を指定すると、その数値が大きいほど、他のフレックスアイテムと比較してより多くの余白を分配され、結果としてアイテムのサイズが拡大します。例えば、flex-grow: 1とflex-grow: 2を持つ2つのアイテムがある場合、後者のアイテムは余白の2/3を占有し、前者は1/3を占有します。
このプロパティは、コンテンツの量や画面サイズに応じて、アイテムが柔軟に伸縮し、利用可能なスペースを最大限に活用するレイアウトを構築する際に非常に重要な役割を果たします。特に、レスポンシブなウェブデザインにおいて、要素の配置とサイズ調整を効果的に行うために利用されます。
公式リファレンス: flex-grow
構文(syntax)
1.item { 2 flex-grow: 1; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません