【初級】flexboxの配置・揃えを正しく理解せよ！【絶対に理解すべき】

flexbox使う人は絶対に理解して欲しいところを解説していきます。

flexbox系の記事は多くありますが、多くの記事が(めっちゃ大事なところなのに)誤解を招くような書き方をしているのでその点を正しく解説できたらな〜と思いこの記事を作成しました！

＊書きながら混乱したので間違ってる場所あるかもです

flexbox系の解説記事を読むと、大体の記事は

解説者1

justify-content は、水平方向の位置を指定するプロパティ

解説者2

align-items は、要素の垂直方向の位置を指定するプロパティ

と書かれています。これめっちゃ誤解生む笑笑

(一言足りないんですよ….。)

じゃあさ、、

flex-direction: columnのときに

justify-content: flex-startが上揃えになったりjustify-content: flex-endが下揃えになるんだけど(垂直方向やん)、

「justify-content は、水平方向の位置を指定するプロパティ」は説明つく？？

うさぎ

いや、説明ついてないで

flex-direction: columnのときに

align-items: flex-startが左揃えになったりalign-items: flex-endが右揃えになるんだけど(水平方向やん)、

「align-items は、要素の垂直方向の位置を指定するプロパティ」は説明つく？？

うさぎ

いや、説明ついてないで

これらの問題を解決するために、

主軸
交差軸

という概念を理解して欲しいです！

主軸とはなんぞや

主軸とは、いわばflexコンテナの向きの主役、リーダー。

この主軸の向き次第で他のプロパティの動きが変わります。

(なんか説明適当…笑)

これまでの誤解×

flex-directionは子要素を水平方向に並べるか垂直方向に並べるかを決めるプロパティである
justify-contentは水平方向の揃え
align-itemsは垂直方向の揃え

以上の3点、間違いまたは言葉足らずです！！！

flex-directionは主軸を決めるプロパティだし、

justify-contentもalign-itemsも主軸によっては水平方向の揃えにもなるし、垂直方向の揃えにもなります。勘違いしないように、この記事で主軸と交差軸はしっかり理解してほしい！

今までflex-direction: columnを使ったあとに、justify-contentやalign-itemが反転して訳が分からなくなった人もいるのではないでしょうか？

(はい、わたしです。それでもなんとなくそういうものだと思って使っていました。)

が、ちゃんと理解したいので勉強しました。

主軸と交差軸の理解

flex-boxの並びを理解するためには、以下のポイントをしっかり理解することが大切。

ポイント

主軸がどの方向か交差軸がどの方向かの理解が大事。

主軸も交差軸もflex-directionが教えてくれる。

flex-direction

僕がリーダー。

並ぶ方向(主軸)決めるからそれにならって並んでや！！

主軸の方向を決める(どの方向に並べるか)

初期値：row(子要素が左から右に並ぶ)

flex-direction	子要素の並び(主軸の向き)
row	左から右へ
row-reverse	右から左へ
column	上から下へ（縦並び）
column-reverse	下から上へ(縦並び)

justify-content

flex-direction

主軸に沿って揃ってや！

頼むからリーダーの言うこと聞いてや！

主軸に対して水平方向の子要素の揃え。

flex-directionとの関係が深い。主軸がどの方向を向いているのか先に考える。

ポイント: 「主軸に対して水平方向」

主軸を意識してみる。

「主軸に対して」水平方向ってところが大事。

＊ただの水平方向じゃない。

flex-directionがrowのとき

主軸は左から右向き。

justify-content	子要素の揃え
flex-start	主軸に沿って左揃え
flex-end	主軸に沿って右揃え
center	主軸に沿って真ん中揃え(左右中央)
space-between	両端揃えの等間隔
space-around	等間隔

(flex-direction: row-reverseだったら主軸は右から左向き。子要素の揃えも左右逆になる。)

flex-directionがcolumnのとき

主軸は上から下向き。

justify-content	子要素の揃え
flex-start	主軸に沿って上揃え
flex-end	主軸に沿って下揃え
center	主軸に沿って真ん中揃え(上下中央)
space-between	両端揃えの等間隔
space-around	等間隔

(column-direction: row-reverseだったら主軸は下から上向き。子要素の揃えも上下逆になる。)

align-items

flex-direction

主軸はどの向き？？

主軸に対して垂直方向に揃ってな！

(交差軸はalign-itemは主軸に対して垂直になるで)

交差軸に沿って要素をどのように揃えるか

ポイント: 「主軸に対して垂直方向」

まず主軸はどの向き？？

交差軸は主軸に対して垂直になるので(上から下か左から右方向)、

主軸を意識したらどの方向が交差軸かわかる。

felex-directionがrowのとき

主軸は左から右向き。

交差軸は(主軸に対して垂直なので)上から下向き。

align-items	子要素の揃え
flex-start	交差軸に沿って上揃え(主軸に対して垂直方向の上揃え)
flex-end	交差軸に沿って下揃え(主軸に対して垂直方向の下揃え)
center	交差軸に沿って真ん中揃え(主軸に対して垂直方向の中央揃え)

(flex-direction: row-reverseで主軸が右から左向きになっても、交差軸は上から下向きなので、子要素の揃えはflex-direction: rowのときと同じ。)

flex-directionがcolumnのとき

主軸は上から下向き。

交差軸は(主軸に対して垂直なので)左から右向き。

align-items	子要素の揃え
flex-start	交差軸に沿って左揃え(主軸に対して垂直方向の左揃え)
flex-end	交差軸に沿って右揃え(主軸に対して垂直方向の右揃え)
center	交差軸に沿って真ん中揃え(主軸に対して垂直方向の中央揃え)

(flex-direction: column-reverseで主軸が下から上向きになっても、交差軸は左から右向きなので、子要素の揃えはflex-direction: columnのときと同じ。)

まとめ

flex-directionは子要素の並ぶ方向(主軸)を決めるリーダー。

justify-contentは主軸に対して水平方向の揃え、

align-itemsは主軸に対して垂直方向の揃え。

”主軸に対して”というところが大事！

ただの水平方向、垂直方向ではだいぶ意味が異なりますのでこれだけは覚えておきましょう！

おーわり

【初級】flexboxの配置・揃えを正しく理解せよ！【絶対に理解すべき】

主軸とはなんぞや

これまでの誤解×