display:flex;は正しく使いな〜

#はじめに
どうも、NISHIKIです。
私ごとですが、ついに
テックエキスパート卒業しました。
<br>
卒業後の打ち上げで
終電逃したんで
Qiita書いてます(笑)
<br>
今日はテックエキスパートの
最終課題のチーム開発で
某メルカリサイトを作っているときに
<br>
全てのクラスにdisplay:flex;かけて
「あはは〜ちゃんとならんわ、教えて〜」
という**強者**がいたので
<br>
それについて
書いていこうと思います。
<br>
じゃあいきまーす。
#flexboxとは？
まず、flexboxとは、何かと言うと
簡単にいうと横並びとか縦並びが
簡単にできるようになるというものです。
<br>
ものすごくざっくりいうと
この縦に並んだboxを
[![Image from Gyazo](https://i.gyazo.com/fd7596e953bd5d0c86eaf1fcef9f883e.png)](https://gyazo.com/fd7596e953bd5d0c86eaf1fcef9f883e)
display:flex;をかけることにより、
下記のように横に並べることができます。
[![Image from Gyazo](https://i.gyazo.com/c26b6173717fd8348bbd7cd679971bc7.png)](https://gyazo.com/c26b6173717fd8348bbd7cd679971bc7)

他にもこんなことも
出来ちゃいます。
[![Image from Gyazo](https://i.gyazo.com/336d26fba00c004e1591bca98c06a4c1.png)](https://gyazo.com/336d26fba00c004e1591bca98c06a4c1)

逆にも出来ますね。
[![Image from Gyazo](https://i.gyazo.com/4f4ae5b36402cba1d5eacf9ee96e1f96.png)](https://gyazo.com/4f4ae5b36402cba1d5eacf9ee96e1f96)

このようにflexboxが
自在に使えるようになれば
レイアウトの幅が広がるので
押さえておきたいですね。

#2, flexboxを使うときはこの図を思い出して
flex boxを理解するには
下図を見ると分かりやすいと思います。
早速どんな図かというと、
これです。
[![Image from Gyazo](https://i.gyazo.com/599f963ea63746b63d259c209aa22852.png)](https://gyazo.com/599f963ea63746b63d259c209aa22852)

おそらくflexboxを理解できていない人は
この図を見たことがない人が
大半なんじゃないかなと思います。
<br>
この図はMDNというサイトにも
載っているので見てみてください
[MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
<br>
図について解説していきます。
<br>
flexboxを理解する上で
大事になってくるのが
flex containerとflex itemです。

[![Image from Gyazo](https://i.gyazo.com/599f963ea63746b63d259c209aa22852.png)](https://gyazo.com/599f963ea63746b63d259c209aa22852)


flex containerは
レイアウトしていきたい要素、
flex itemの親要素に当たる要素です。
<br>
この親要素にdisplay flexで
flex containerを定義すると
flex-directionというプロパティが設定されます。
<br>
これは何かと言うと
言葉のまんまなんですが
方向のことです。
<br>
これはデフォルトでrowに設定されています。
これがrowの時の方向の名前が
x軸方向はMain axis、y軸方向はCross axisと言います。
[![Image from Gyazo](https://i.gyazo.com/7a75d515348cad71b4af123fe41ed623.png)](https://gyazo.com/7a75d515348cad71b4af123fe41ed623)

そして、flex itemはこのMain axisに沿って
並べられていきます。
したがって、flex itemが増えると
flex directionがrowの時は
どんどん右側に並べられていきます。
<br>
隙間とかはちょっと違うんですけど
ざっくりこんな感じです。
[![Image from Gyazo](https://i.gyazo.com/1d24c58bf5ee84fcbc23643940603540.png)](https://gyazo.com/1d24c58bf5ee84fcbc23643940603540)
そして次に
flex-direction: column;としたときは
main axisとcross axisが入れ替わります。

こんな感じです。
[![Image from Gyazo](https://i.gyazo.com/d37e7322a8ee14cca074f5ebb5cc62ea.png)](https://gyazo.com/d37e7322a8ee14cca074f5ebb5cc62ea)
先ほど説明したように、
flex itemはmain axisに沿って
並べられるのでflex itemは縦方向に並びます。
<br>
新たにflex itemを増やしていくと
今度は下に並べられていきます。
[![Image from Gyazo](https://i.gyazo.com/ebf3eaabab25dd272cbf0301ab833a80.png)](https://gyazo.com/ebf3eaabab25dd272cbf0301ab833a80)
こんな感じです。
ここまで理解できれば大丈夫です。
<br>
あとは、flex container、flex item
それぞれにつけられるプロパティが決まっているので
それを知っておくだけです！
#3-1, flex containerに使えるプロパティ

flex containerに使えるプロパティ
はい、こちらです。
・flex-wrap
・justify-content
・align-items
・align-content
<br>
これ以外ももちろんいっぱいありますが、
とりあえず知っといたら良いのは
この辺りかと思います。
<br>
特にjustify-contentはよく使いますね。
最初に出した例も
<br>
これはjustify-content: space-between;で
両端に寄せてます。
[![Image from Gyazo](https://i.gyazo.com/04c5e45145506fc945eaed2b37e3cd60.png)](https://gyazo.com/04c5e45145506fc945eaed2b37e3cd60)

ちなみに上下左右中央に配置したいときは、
<br>
justify-content: center;
align-items: center;
<br>
とすると、真ん中になります。
[![Image from Gyazo](https://i.gyazo.com/5d701b5e6d684e140477029486e06ee4.png)](https://gyazo.com/5d701b5e6d684e140477029486e06ee4)

#3-2, flex itemに使えるプロパティ
flex itemに使えるプロパティ
はい、こちらです。
<br>
order
flex-grow
flex-shrink
flex-basis
align-self
<br>
こちらも他にも色々ありますが
とりあえずはこのくらい
知っておけばって感じです。
<br>
orderは個別に要素の並び替えの
順番を指定することができます。
<br>
デフォルトの値は０で小さい方から
順番になります。
<br>
ちなみに上の真ん中に寄せた
boxの１の方に
<br>
order: 1;
<br>
とすると、box2はデフォルトで０なので
順番が入れ替わります。
[![Image from Gyazo](https://i.gyazo.com/19ddd3c6cf8cffe9a2ede60b4b080a9c.png)](https://gyazo.com/19ddd3c6cf8cffe9a2ede60b4b080a9c)
こんな感じです。
他のプロパティについても
説明していきたいところでは
ありますが、長くなりそうなんで
また気が向いたら書きます。
<br>
最後まで読んでいただき
ありがとうございました。