Flexbox生成

仕組み

Flexboxは複雑ではありませんが、ほぼ全員がつまずく点が1つあります。justify-contentとalign-itemsは、水平と垂直を意味しません。意味するのは、方向に沿う向きと、方向に交差する向きで、その方向は自分で設定するものです。

落とし穴を、はっきり言うと

flex-direction: rowでは、justify-contentは水平方向、align-itemsは垂直方向に働きます。columnに切り替えると、両者はまったく入れ替わります。Flexboxで失われる時間の大半は、実質的にこれが原因です。下の説明は、方向を変えるたびに更新されるため、関係を暗記するのではなく、目で確認できます。

主軸と交差軸

主軸は、flex-directionで設定される、項目が並ぶ軸です。交差軸は、それに直交する軸です。justify-contentは主軸に沿って空きを配分し、align-itemsは交差軸上で項目を配置します。この2つの名前を覚えれば、あとは自然に理解できます。

gapと、それがmarginに取って代わった理由

gapは、最初と最後の項目の外側に余白を足さず、項目の間にだけ余白を入れます。これは、marginがまさに間違える点で、以前は:last-childのハックで修正していたものです。現行のすべてのブラウザで使えるため、もう避ける理由はありません。

nowrapは、はみ出しではなく縮小を意味します

既定はnowrapで、項目は新しい行に移るのではなく、本来のサイズより小さく縮んで収まります。これが、Flexの行の中でテキストが予期せず押しつぶされることがある理由です。wrapを設定すれば、項目は代わりに下の行へ移ります。子要素にmin-width: 0を指定すると、内容より小さく縮むのを防げます。

縦横の両方向で中央に配置する

justify-content: centerとalign-items: centerを組み合わせると、flex-directionにかかわらず、項目が両方向で中央に配置されます。丸ごと覚えておく価値のある、唯一の組み合わせです。