Flexbox
ボックスのレイアウト方法を定めるcssの機能
コンテナにアイテムの幅/高さ（および順序）を変更して、使用可能なスペースを最適に埋めることができるようにすること
用途
向いてる
向いてない
基本要素
https://gyazo.com/f6c5f4f6852dd5a5c8727c080dd2c734
全体イメージ
flex container
子:flex items
direction
main start
main end
cross start
cross end
size
widthやheightで範囲決める
main size
cross size
flex container
display:flex or display:inline-flex
flex containerの定義
flex-direction
主軸の変更
flex-wrap
アイテムを複数行で折り曲げるか決める
flex-flow
flex-directionとflex-wrap
gap
子の隙間定義できる
便利
子が１つなら、適用されない
flex item
order
論理構造(HTML)と見た目(CSS)の順番を変えたい時に利用
flex-grow
itemが占めるflex container内の使用可能なスペースの量を決定
flex-shrink
必要に応じてitemaを縮小する機能を定義
flex-basis
参考
分かりやすい！おすすめ
Interactiveでわかりやすい