Flexbox (Flexible Box Layout Module) は、要素の配置、整列、空間配分を柔軟にコントロールするためのCSSのレイアウトモデルです。

1. Flexコンテナ（親要素）に適用するプロパティ

これらのプロパティは、子要素（Flexアイテム）全体の動作を制御します。

プロパティ	値	役割と動作
display	flex	要素をFlexコンテナに変換します。これがなければFlexboxは動作しません。
flex-direction	row (初期値)	アイテムを左から右へ水平に配置します。
	row-reverse	アイテムを右から左へ水平に逆順に配置します。
	column	アイテムを上から下へ垂直に配置します。
	column-reverse	アイテムを下から上へ垂直に逆順に配置します。
justify-content	flex-start	主軸（flex-directionで定義した軸）の始端にアイテムを寄せる。
	flex-end	主軸の終端にアイテムを寄せる。
	center	主軸の中央にアイテムを寄せる。
	space-between	アイテム間に均等なスペースを配置し、両端のアイテムは始端・終端に密着させる。
	space-around	アイテムの両側に均等なスペースを配置する（アイテム間のスペースは両端のスペースの2倍になる）。
	space-evenly	アイテム間、および両端に全て均等なスペースを配置する。
align-items	stretch (初期値)	交差軸（主軸に垂直な軸）の方向へ、アイテムの高さをコンテナに合わせて引き延ばす。
	flex-start	交差軸の始端にアイテムを寄せる。
	flex-end	交差軸の終端にアイテムを寄せる。
	center	交差軸の中央にアイテムを寄せる（垂直方向の中央揃えによく使用）。
flex-wrap	nowrap (初期値)	アイテムを折り返さず、1行に押し込める。
	wrap	アイテムがコンテナからはみ出す場合、新しい行へ折り返す。
	wrap-reverse	アイテムを折り返す際、交差軸の方向を逆にする。
gap	10px 20pxなど	アイテム間の主軸方向と交差軸方向の隙間をまとめて指定（row-gapとcolumn-gapの省略記法）。

2. Flexアイテム（子要素）に適用するプロパティ

これらのプロパティは、個々の子要素のサイズや配置を制御します。

プロパティ	値	役割と動作
flex-grow	数値 (初期値: 0)	余った空間をアイテムがどれだけ分け合うかを定義します。1を指定すると余白を均等に分け合います。
flex-shrink	数値 (初期値: 1)	アイテムがコンテナからはみ出すとき、どれだけ縮小するかを定義します。0にすると絶対に縮小しません。
flex-basis	length (200pxなど)	アイテムの初期サイズを定義します。widthやheightより優先されます。autoはコンテンツのサイズに依存します。
flex	grow shrink basis	flex-grow, flex-shrink, flex-basisのショートハンド（省略記法）。例: flex: 1 1 0%
order	数値 (初期値: 0)	アイテムの表示順序を定義します。小さい値ほど先に表示されます。DOM構造とは独立して順序を変えられます。
align-self	auto (初期値)	個々のアイテムに対して、親要素のalign-itemsの設定を上書きして、交差軸方向の整列を個別で指定します。
	flex-start, center, flex-end, stretch	親要素のalign-itemsと同じ値を取ります。

【ショートハンドの推奨】

開発現場では、flex-grow, flex-shrink, flex-basisを個別に指定するよりも、flexプロパティを使用することが推奨されます。

ショートハンド	意味
flex: 1;	1 1 0%と同じ（余白を均等に分け合う、最も一般的な使い方）
flex: auto;	1 1 autoと同じ（初期サイズはコンテンツまたは設定されたwidthに従い、余白を均等に分け合う）
flex: none;	0 0 autoと同じ（アイテムは伸びも縮みもしない）