概要
フレックスボックスレイアウト（以下、フレックスボックス）は、CSS3で導入されたレイアウト方式である。従来のfloatやinline-blockに比べ、要素を柔軟かつ直感的に並べ替えることが可能であり、特にレスポンシブデザインにおいて有用である。親要素を「フレックスコンテナ」、その子要素を「フレックスアイテム」と呼び、それぞれに対して制御を行う仕組みである。
フレックスボックスレイアウトについて
フレックスボックスは一次元のレイアウト方式であり、水平方向または垂直方向のいずれか一方向に対して要素を整列させることを基本とする。二次元的な制御が得意なグリッドレイアウトとは異なり、フレックスボックスは主軸（main axis）と交差軸（cross axis）の2軸を基盤とし、要素を効率的に配置する。
主なプロパティと解説
（1）コンテナに指定するプロパティ
display: flex;
要素をフレックスコンテナとして定義する。
flex-direction
アイテムを並べる方向を指定する。row（横並び）、column（縦並び）が主要な値である。
justify-content
主軸方向における整列方法を指定する。左寄せ、中央寄せ、均等配置などが可能である。
align-items
交差軸方向における整列方法を指定する。上下方向の中央揃えや端揃えを容易に実現できる。
flex-wrap
アイテムがコンテナ幅を超える場合に折り返すか否かを指定する。
（2）アイテムに指定するプロパティ
flex-grow
余白に対して要素がどの程度の割合で拡張されるかを指定する。
flex-shrink
コンテナ幅が不足する場合に、要素が縮小される比率を指定する。
flex-basis
要素の基本サイズを指定する。
align-self
特定のアイテムに対して、交差軸方向の整列を個別指定する。
簡単なサンプルコード
（1）横並びの基本例
See the Pen Untitled by yoshi (@yos3634) on CodePen.
（2）レスポンシブ対応の例
See the Pen Untitled by yoshi (@yos3634) on CodePen.
上記コードにより、画面サイズが狭い場合はカードが縦に並び、広い場合は横に並ぶ挙動を実現できる。
まとめ
フレックスボックスは一次元レイアウトにおいて強力な手段であり、従来の方法に比べ直感的な制御が可能である。特に中央揃えや均等配置、レスポンシブデザイン対応において効果的である。今後はフレックスボックスとグリッドレイアウトを比較し、適材適所で使い分けることが実務上の課題である。
