概要
フレックスボックスは、親要素（フレックスコンテナ）と子要素（フレックスアイテム）の2つの層に対してプロパティを設定することで、柔軟なレイアウトを実現する仕組みである。本稿では、主に使用頻度の高いプロパティを体系的に整理し、その挙動と利用場面を記載。
コンテナに適用するプロパティ
display: flex
フレックスボックスを有効化するための基礎指定である。これにより親要素がフレックスコンテナとして認識され、直下の子要素がフレックスアイテムとして制御対象となる。
flex-direction
アイテムを配置する方向を指定する。
row：水平方向に左から右へ配置（初期値）
row-reverse：水平方向に右から左へ配置
column：垂直方向に上から下へ配置
column-reverse：垂直方向に下から上へ配置
利用場面：横並びを縦並びに切り替える際、レスポンシブデザインにおける画面幅ごとの配置変更など。
justify-content
主軸方向におけるアイテムの揃え方を指定する。
flex-start：主軸の始点に揃える（初期値）
flex-end：主軸の終点に揃える
center：中央に揃える
space-between：両端を揃え、残りのスペースを均等分配
space-around：各アイテムの両側に均等な余白を確保
space-evenly：アイテム間と両端に均等な余白を確保
利用場面：ナビゲーションメニューの等間隔配置、ボタン群の中央寄せなど。
align-items
交差軸方向におけるアイテムの揃え方を指定する。
stretch：高さを可能な限り伸ばす（初期値）
flex-start：交差軸の始点に揃える
flex-end：交差軸の終点に揃える
center：中央に揃える
baseline：テキストのベースラインを基準に揃える
利用場面：縦方向の中央揃え、リスト項目の高さを均一化する場合など。
flex-wrap
アイテムがコンテナの幅を超える場合に折り返しを行うかを指定する。
nowrap：折り返さない（初期値）
wrap：コンテナ幅に収まらない場合は折り返す
wrap-reverse：折り返しつつ反転して配置する
利用場面：カードレイアウトやギャラリーのように幅に応じて複数行に整列させる場合。
align-content
複数行のフレックスアイテムを交差軸方向で揃える。
※有効なのはflex-wrapで折り返しが発生する場合のみ。
stretch（初期値）、flex-start、flex-end、center、space-between、space-around
利用場面：複数段のコンテンツを縦方向に均等配置する場合。
アイテムに適用するプロパティ
flex-grow
アイテムが余白をどの程度拡張するかを指定する。数値を設定し、相対的な比率で分配される。
例：アイテムAにflex-grow: 2;、アイテムBにflex-grow: 1;を指定すると、AはBの2倍の割合で余白を獲得する。
flex-shrink
コンテナが小さい場合にアイテムを縮小させる比率を指定する。
初期値は1であり、比率の高い要素ほど強く縮小される。
注意点：幅を縮小させたくない場合は0を指定する。
flex-basis
アイテムの基本サイズを指定する。widthやheightに似ているが、フレックスボックスの計算における基準値となる点が異なる。
(例).item {
flex: 1 1 200px; /* grow=1, shrink=1, basis=200px */
}
上記指定では、基準サイズ200pxを保ちながら、余白に応じて拡張縮小を行う。
flex（ショートハンド）
flex-grow、flex-shrink、flex-basisをまとめて指定できる。
例：flex: 1 0 auto;
align-self
個別のアイテムに対して交差軸方向の揃え方を指定する。コンテナに設定したalign-itemsより優先される。
まとめ
フレックスボックスの各プロパティは、単独では単純な挙動を示すが、組み合わせによって高度なレイアウトを柔軟に実現することが可能である。特にflex-grow、flex-shrink、flex-basisの3要素は、カードレイアウトやレスポンシブデザインにおいて中心的役割を担う。実務においては、場面に応じて最適なプロパティを選択し、グリッドレイアウトなど他の手法と併用することが有効である。
