FlexBoxとは
1次元のレイアウトモデルです。
-> ポイントは、行か列（縦か横）のどちらかしかレイアウトを選べない事です。
FlexBoxの構成
「Flexコンテナー」と「Flexアイテム」から成り立ちます。
Flexボックスの領域が「Flexコンテナー」で、その子要素が「Flexアイテム」になります。
-> display: flexが指定された要素が「Flexコンテナー」になります
レイアウトの考え方
Flexコンテナー
ベース
Flexコンテナーでは、2つの軸を考える必要があります。
1つは主軸（main axis）、もう1つは交差軸（cross axis）です。
主軸はflex-directionによって定義されます。プロパティは4つです。
これらのプロパティで、主軸の向きと、コンテンツの始点が決まります。
主軸の向きはFlexアイテムレイアウトの縦/横方向、始点はFlexアイテム表示順になります。
| プロパティ | 軸の方向 | 始点と終点 |
|---|---|---|
| row | インライン要素の並ぶ方向（横） | 左から （A,B,C） |
| row-reverse | インライン要素の並ぶ方向（横） | 右から （C,B,A） |
| column | ブロック要素の並ぶ方向（縦） | 上から |
| column-reverse | ブロック要素の並ぶ方向（縦） | 下から |
参照：https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction
折り返し
折り返しのプロパティを設定していない場合、flexアイテムはflexコンテナからはみ出します（オーバーフロー）。
折り返す為にはflex-wrapを指定します。valueはwrapになります。
参照：https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap
アイテムの位置
align-items
交差軸におけるFlexアイテムの位置合わせを定義します。
初期値（stretch）の場合、Flexアイテム内のもっともheightが高いアイテムと同じ高さまで伸長します。
よく使用されるのはcenterで、垂直センタリングしたい場合に使用されます。
justify-content
主軸でのアイテム配置を定義します。
初期値はstartなので、flex-directionで決定した主軸の向きと始点からアイテムが設置されます。
良く使用されるのが、
- 右寄せしたい場合に
flex-end - コンテンツの端に余白を割り当てる
space-around - コンテンツの端に余白を割り当てない``space-between
などがあります。
Flexアイテムのサイズに関するもの
flexコンテナでコンテンツの向きは決定できますが、FlexBox内のstyleはflexアイテムで決定します。
| プロパティ | 内容 |
|---|---|
| flex-basis | itemのサイズを決めます。 |
| flex-grow | itemのflex-basisを拡大します |
| flex-shrink | 他のitemと比較して、itemがどれだけ縮小されるかを指定します。 |
flex-basis
flex-basisはアイテムのサイズを定義します。
もしこれが定義されていない場合は、flexアイテムのコンテンツ自体のサイズがflex-basisの値として使用されます。
flex-grow
flexコンテナ内に余白が存在していた場合、このプロパティの値によって余白が、そのアイテムのflex-basisに追加されます。
実際のページでは、flexコンテナのサイズに応じて拡大するように見えます。
例：アイテム全てのflex-growを1にした場合。
余白部分を均等に分けて、それぞれのアイテムのbasisに追加します。
例：アイテム1つのgrowを2、残りのアイテム2つのgrowを1にした場合、
growを2にしたアイテムに余白の半分（2分の一）、growを1にしたアイテムに各4分の1の余白を追加します。
flex-shrink
flex-shrinkに正の数字が設定されている場合、他のアイテムより大きな割合でflex-basisが縮小します。
より大きな数字が指定されているアイテムほど、他のアイテムより大きな割合で縮小します。
最後に
ざっくりとまとめてみました。
flexboxには、まだまだやれる事はあります。
ただ、flexboxを使用する場合で大事なのが1次元である事です。
例えば、flex-wrapで折り返しを出来るようにした場合、コンテンツが左右によるような表示になります。（すでにtipsが存在しています）。
もし複数行になるようなレイアウトを作りたい場合は、縦横を定義できるGridの使用を検討してください。
参考
CSS フレックスボックスレイアウト
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout
フレックスボックスの基本概念
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox