flexbox 垂直と水平の話
Hello, world!
( ・∇・)
数日前からflexboxをやりはじめたのですがある一点がわかっておらず苦戦しました。
( ・∇・;)
それは、flex-directionの方向ありきで他のプロパティを考えないといけないところ！
それがわかってやっとスッキリ。
赤字部分が抜けているとまったく思い通りに動かせないので注意が必要です。
この数日間はなんだったのか。。
専門用語とかはわからないのですが以下のように考えるとわかりやすいんじゃないでしょうか。
( ・∇・)
justify-contentはよく水平方向と表現されますが、
flex-direction方向で、どのようにitemをレイアウトするか、と理解したほうがわかりやすい。
同様に、
align-itemsはよく垂直方向と表現されますが、
flex-direction方向に対して垂直方向でどのようにitemをレイアウトするか、と理解したほうがわかりやすい。
( ・∇・) !!
flex-direction と justify-contentがあたかも同列のプロパティのように考えてしまうと、こんがらがります。flex-directionは別格。
その下にjustify-contetn alogn-itemsなどがあり、flex-direction方向ありきでitemiのレイアウトをいじれる、と覚えて置くといいんじゃないでしょうか。
こちらのサイトでは、そういった軸に対してという話がきちんと言及されており、説明がシンプルなのではっておきます。
では〜！
( ・∇・)
