Flexbox

Flexboxとは

Flexboxは、要素を行または列の一方向に並べ、余った空間の配分や位置揃えを柔軟に制御するCSSのレイアウト方式です。

どんな場面で使うか

ナビゲーション、ボタンの並び、カード内の配置、上下左右の中央揃えなどに使います。親要素をflexコンテナーにすると、その直下の要素をflexアイテムとして配置できます。

選ぶとき・使うときのポイント

Flexboxは一方向の並びに強く、行と列を同時に設計する二次元レイアウトにはCSS Gridが向くことがあります。見た目のためにorderを変えると読み上げ順とずれる場合がある点にも注意します。