はじめに
CSSをいじっていたら、flex-direction, justify-content, align-itemsの落とし穴にハマったので、ここに記したいと思います。
flex-directionを「ふれっくすでぃれくしょん」という名詞としか捉えていなかったというのが問題だったかなと。
よろしくお願いします。
flex-directionの落とし穴
flex-directionはdisplay:flexをかけた親要素に併用して使います。
落とし穴というのは、「flex-directionをかけたら、直下の子要素の並び順を変えることができる」という認識です。
なので必ず「flex-directionをかけたら、直下の子要素の主軸方向を変えることができる」と覚えてください。
並び順を変えるという勘違いする認識
※ 注意！ ここからは間違った認識をした説明を書いています
例えば↓のような構造の親要素と子要素があったとします。display:flex;により三つの子要素が横並びになっています。
この親要素（グレーの範囲)にflex-direction: row-reverse;をかけると子要素を右から左並び（逆並び）に変更することができます。↓
また、flex-direction: columnをかけると上から下に並べます。
ここまでがちょっとまずい説明です。
結果的には「◯◯順に並べる」という表現通りの動きを見せているので問題ないのですが、もし上記の例のflex-directon: columnをかけている状態から、さらにこれらを真ん中に移動させたいとします。
↓期待している形
これを実現させるためにjustify-content: center;を使った大馬鹿ものが私です。はい。
justify-content: centerでは期待通りの動きはしてくれません。
これを改善するためのポイントは主軸です。
主軸を意識する
大事なポイント①
justify-contentプロパティはdisplay: flex;を付与した親要素の直下の子要素を横に移動できるという認識を持っていましたが、厳密にいうと主軸の上での配置を決めるということです。
大事なポイント②
そしてflex-directionの真の効果は主軸の方向（direction)を変えるということです。
私はflex-directionというプロパティが単に「順番を並び替える」という効果があるものだという認識と、justify-contentは横に位置を移動させられるという間違った認識で、↓のGIFのように変化するものだと誤解していたのです。
つまり私の中の主軸は無意識に常にずっと↓の画像のようでした。
しかし実はこう↓
なので、flex-directon: columnを付与している状態では、justify-contentで配置を縦方向に動かしていたことになります。
さらに子要素が親要素の縦パンパンに入っていたので、縦に動かしていても、全く動いているように見えず、「justify-contentが反映されていない」と勘違いしていたのも気付くのに時間がかかった要因の一つでした。
中心に持っていきたいのであれば、主軸に対して交差軸に配置を調整できるalign-itemsプロパティを使います。
align-items: center;で期待通りの位置へ変更できました！
最後に
flex-directionは主軸の方向を変化させるということをしっかり認識していないと、columnを指定したときに、他のプロパティの挙動の変化に困惑する事態になります。
justify-contentは横に動かす！align-itemsは縦に動かす！という感覚を持っていると、まんまとこの落とし穴にハマってしまいます。
反省し主軸を意識して組み立てていきたいと思います！
↧