5-2-2_Flexbox 実務テクニック チートシート

Flexboxは、主に一方向（行または列）のレイアウトと、その中のアイテムの整列・順序・空間分配を扱うための強力なツールです。コンポーネントレベルのレイアウトに最適です。

1. Flexコンテナ（親要素）に適用する主要テクニック

Flexコンテナに適用することで、子要素（Flexアイテム）の基本的な振る舞いを決定します。

プロパティ	値	役割と動作 (実務での使用例)
display	flex	要素をFlexコンテナに変換します。これがなければ何も始まりません。
flex-direction	row (横) / column (縦)	アイテムの並ぶ方向を定義します。ナビゲーションメニュー (row) やフォームのグループ化 (column) に必須。
justify-content	center, space-between, space-around	主軸（Main Axis、flex-directionで定義された方向）に沿って、アイテム間の空間を分配します。ヘッダーのロゴとメニューを両端に寄せる (space-between) のに多用されます。
align-items	center, flex-start, flex-end, stretch	交差軸（Cross Axis、主軸と垂直な方向）に沿って、アイテムを整列します。要素を垂直方向の中央に配置する (center) のに最も頻繁に使われます。
flex-wrap	wrap	コンテナの幅を超える場合に、アイテムを自動的に次の行へ折り返させます。レスポンシブなタグリストやカードのタイル表示には必須です。
gap	1rem または 10px 20px	Flexアイテム間の**間隔（余白）**を定義します。marginの相殺を気にせず、シンプルに間隔を設定できます。Gridと同じく実務で非常に多用されます。

2. Flexアイテム（子要素）に適用する主要テクニック

個々のFlexアイテムに適用することで、コンテナ内の空間をどのように占有するか、どのように整列するかを制御します。

プロパティ	値	役割と動作 (実務での使用例)
flex-grow	1, 0 など	増加の比率。利用可能な空き空間をどれだけ占有するかを定義します。1を設定すると、残りの空間をすべて均等に分け合います。メインコンテンツを拡張させるのに便利。
flex-shrink	1, 0 など	縮小の比率。アイテムの合計サイズがコンテナを超えた場合に、どれだけ縮小するかを定義します。特定のアイテムを絶対に縮小させたくない場合 (0) に使用します。
flex-basis	auto, 200px, 25%	アイテムが空間を占有する前の初期サイズを定義します。この値がflex-growやflex-shrinkの計算の出発点になります。
flex	1 1 auto (推奨デフォルト)	flex-grow, flex-shrink, flex-basis のショートハンドです。例えば、flex: 1 は 1 1 0% (空き空間を占有し、縮小もする) のショートハンドとして非常によく使われます。
order	0, 1, -1 など	HTMLのマークアップ順序に関係なく、Flexアイテムの視覚的な表示順序を定義します。モバイルでアイテムの順番を変える際に使用。
align-self	center, flex-start, flex-end	親のalign-itemsの設定を上書きし、個々のアイテムを交差軸上で整列させます。特定のアイテムだけを上に寄せたい場合などに使います。

3. 実務で必須のテクニック：センタリング

Flexboxの最も強力で実用的な機能の一つは、水平・垂直方向の完璧なセンタリングです。

目的	CSSコード (コンテナ)
垂直・水平方向の完璧なセンタリング

Kindle本のご案内