#はじめに
どうも、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はデフォルトで０なので
順番が入れ替わります。

こんな感じです。
他のプロパティについても
説明していきたいところでは
ありますが、長くなりそうなんで
また気が向いたら書きます。

最後まで読んでいただき
ありがとうございました。