Flexboxで左右中央寄せにならない!? “justify-content”の注意点
posted : 2018.06.26
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
新しめのブラウザバージョンであればほぼ対応してきているFlexbox。
中央寄せ関係も簡単にできてこれからますます使うことになりそうですが、ちょっと気になる仕様があるのでメモ書きです。
justify-contentしてるのに左右中央寄せにならない？？
全然簡単じゃないじゃん！バグだ！もうヤダFlexboxなんて使わない！となる前に確認してみて下さい。
その”flex-direction”指定、”column”じゃありません？
つまりは要素の並べる方向を縦にしてませんか？ということ。
Flexboxの時に中央寄せをする際に指定するプロパティ“justify-content”と“align-items”ですが見落としがちな仕様があります。
［間違った解釈］
- justify-content：横方向揃え指定
- align-items：縦方向揃え指定
↑で理解していると過去のワタクシのようにハマるので注意しましょう苦笑
結論から言うと、“justify-content”と“align-items”には下記のような仕様があります。
“justify-content”と“align-items”は”flex-direction”の指定によって基準軸が変わる（変わったように見える）
［正しい解釈］
［flex-direction:row;（要素横並び）の場合］
- justify-content：横方向揃え指定
- align-items：縦方向揃え指定
［flex-direction:column;（要素縦並び）の場合］
- justify-content：縦方向揃え指定
- align-items：横方向揃え指定
イメージとして、要素横並び（flex-direction:row;）の場合の基準軸は水平軸（横方向）です。
この場合は↑の通り、justify-contentは横方向揃え指定、align-itemsは縦方向揃え指定になります。
では、要素が横方向に並んだ絵を90°回転させて、見かけ上、要素縦並びにしたと仮定してみましょう。
90°回転させるわけですから、水平軸も見かけ上、垂直軸になりますよね。そのイメージです。
つまるところ、flex-direction:column;の場合はalign-itemsが横方向の揃え指定となり、justify-contentが縦方向の揃え指定となるのです。
コーディング時にこの仕組みに気付いたんですが、最初は恥ずかしながらバグかと思いました苦笑
結構大きなサイトの解説でもjustify-contentは横方向揃え指定、align-itemsは縦方向揃え指定と記載されているので、ちょっとしたTipsとしてどなたかの参考になればこれ幸い。
解説は下記サイトが超絶わかりやすいです。
本日も偉大なる先人達に感謝。
