【CSS Modules】flex省略形プロパティの使い方

flexプロパティは、CSSのFlexboxレイアウトにおいて、フレックスコンテナ内の子要素（フレックスアイテム）のサイズ調整に関する挙動をまとめて定義するためのショートハンドプロパティです。このプロパティを使用することで、flex-grow、flex-shrink、flex-basisという三つの関連プロパティの値を一度に設定し、記述を簡潔に保つことができます。

flex-growは、フレックスアイテムがコンテナ内の余ったスペースをどのように分配して拡大するかを制御する比率です。デフォルトは0で、負の値は指定できません。flex-shrinkは、コンテナ内のスペースが不足している場合に、フレックスアイテムがどの程度縮小するかを制御する比率で、デフォルトは1です。こちらも負の値は指定できません。flex-basisは、フレックスアイテムが拡大・縮小する前の初期サイズを定義します。これはwidthやheightプロパティと同様に具体的な長さ（例：200px）や、auto、contentといったキーワードで指定できます。

例えば、flex: 1;と指定した場合、それはflex: 1 1 0%;と同じ意味になり、アイテムは利用可能なスペースを均等に拡大し、必要に応じて縮小しますが、初期サイズは0%として扱われます。flex: auto;はflex: 1 1 auto;と同等で、アイテムはコンテンツに応じた初期サイズを持ち、必要に応じて拡大・縮小します。flex: none;はflex: 0 0 auto;と同等で、アイテムは拡大も縮小もせず、コンテンツに応じた初期サイズを維持します。

このflexプロパティを適切に利用することで、Webページのレスポンシブデザインにおいて、要素の配置やサイズ調整を柔軟かつ効率的に行うことが可能となり、多様な画面サイズに対応した動的なレイアウトをシンプルに実現できます。

Copy
1flex: <flex-grow> <flex-shrink> <flex-basis>;

引数なし

引数はありません

戻り値なし

戻り値はありません