#はじめに
どうも、NISHIKIです。
私ごとですが、ついに
テックエキスパート卒業しました。
卒業後の打ち上げで
終電逃したんで
Qiita書いてます(笑)
今日はテックエキスパートの
最終課題のチーム開発で
某メルカリサイトを作っているときに
全てのクラスにdisplay:flex;かけて
「あはは〜ちゃんとならんわ、教えて〜」
という強者がいたので
それについて
書いていこうと思います。
じゃあいきまーす。
#flexboxとは？
まず、flexboxとは、何かと言うと
簡単にいうと横並びとか縦並びが
簡単にできるようになるというものです。
ものすごくざっくりいうと
この縦に並んだboxを
display:flex;をかけることにより、
下記のように横に並べることができます。
他にもこんなことも
出来ちゃいます。
逆にも出来ますね。
このようにflexboxが
自在に使えるようになれば
レイアウトの幅が広がるので
押さえておきたいですね。
#2, flexboxを使うときはこの図を思い出して
flex boxを理解するには
下図を見ると分かりやすいと思います。
早速どんな図かというと、
これです。
おそらくflexboxを理解できていない人は
この図を見たことがない人が
大半なんじゃないかなと思います。
この図はMDNというサイトにも
載っているので見てみてください
MDN
図について解説していきます。
flexboxを理解する上で
大事になってくるのが
flex containerとflex itemです。
flex containerは
レイアウトしていきたい要素、
flex itemの親要素に当たる要素です。
この親要素にdisplay flexで
flex containerを定義すると
flex-directionというプロパティが設定されます。
これは何かと言うと
言葉のまんまなんですが
方向のことです。
これはデフォルトでrowに設定されています。
これがrowの時の方向の名前が
x軸方向はMain axis、y軸方向はCross axisと言います。
そして、flex itemはこのMain axisに沿って
並べられていきます。
したがって、flex itemが増えると
flex directionがrowの時は
どんどん右側に並べられていきます。
隙間とかはちょっと違うんですけど
ざっくりこんな感じです。
そして次に
flex-direction: column;としたときは
main axisとcross axisが入れ替わります。
こんな感じです。
先ほど説明したように、
flex itemはmain axisに沿って
並べられるのでflex itemは縦方向に並びます。
新たにflex itemを増やしていくと
今度は下に並べられていきます。
こんな感じです。
ここまで理解できれば大丈夫です。
あとは、flex container、flex item
それぞれにつけられるプロパティが決まっているので
それを知っておくだけです！
#3-1, flex containerに使えるプロパティ
flex containerに使えるプロパティ
はい、こちらです。
・flex-wrap
・justify-content
・align-items
・align-content
これ以外ももちろんいっぱいありますが、
とりあえず知っといたら良いのは
この辺りかと思います。
特にjustify-contentはよく使いますね。
最初に出した例も
これはjustify-content: space-between;で
両端に寄せてます。
ちなみに上下左右中央に配置したいときは、
justify-content: center;
align-items: center;
とすると、真ん中になります。
#3-2, flex itemに使えるプロパティ
flex itemに使えるプロパティ
はい、こちらです。
order
flex-grow
flex-shrink
flex-basis
align-self
こちらも他にも色々ありますが
とりあえずはこのくらい
知っておけばって感じです。
orderは個別に要素の並び替えの
順番を指定することができます。
デフォルトの値は０で小さい方から
順番になります。
ちなみに上の真ん中に寄せた
boxの１の方に
order: 1;
とすると、box2はデフォルトで０なので
順番が入れ替わります。
こんな感じです。
他のプロパティについても
説明していきたいところでは
ありますが、長くなりそうなんで
また気が向いたら書きます。
最後まで読んでいただき
ありがとうございました。