Flexbox
1次元のレイアウト組むときに使う
0から学ぶならこれ
主軸(flex-directionで指定できる)と交差軸
始点と終点（方向）
サンプル
flexプロパティ
CSS の一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。 どちらか一方OKなはず。なぜ同時に？(原文はAlong with)
また、その Element(要素)の子Element(要素)それぞれには Flex アイテム が適用されます。 flex アイテムが適用された Element(要素)は flex layout を構成し、CSS Flexible Box Layout Module で定義されているプロパティの全てが適用されるはずです。
プロパティ
flex-direction: Flexコンテナ内の主軸の向き
flex-grow: フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか 残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです
すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って配分されます。
https://gyazo.com/5e0dfdb793e15edc602cef4fbdedc7f1 https://developer.mozilla.org/ja/docs/Web/CSS/flex
2:1:1になっている
flex-shrink: flex containerよりflex itemが大きいときに縮小幅を決める
大きいほうがより縮小される
大抵の場合1（flex containerと同じ幅）じゃないかな？kadoyau.icon
flex-basis: フレックスアイテムの主要部分の初期の寸法
widthより優先される
(auto 以外の) flex-basis と width (または flex-direction: column の場合は height) の両方が要素に設定されていた場合、 flex-basis が優先されます。
max-content, min-content, fit-contentの詳細な挙動
軸上のアイテムの配置を変更する
align-item (cross axis) - justify-content (main axis)
単一の行に対して影響
align-content 複数行のflexboxに影響
alingn-itemとかと組み合わせて使う
歴史