A
B
C
D
E
F
G
/* CSSコード*/
親要素の幅（100〜600px）
container width
600
px
子要素を横または縦方向に並べるか
flex-direction
row（横並び）
column（縦並び）
row-reverse
column-reverse
主軸方向（横または縦）での並び方
justify-content
flex-start（先頭寄せ）
center（中央揃え）
flex-end（末尾寄せ）
space-between（両端）
space-around（均等）
space-evenly（全て均等）
交差軸方向（横または縦）での揃え方
align-items
stretch（自動高さ）
flex-start（上寄せ）
center（中央揃え）
flex-end（下寄せ）
baseline（ベースライン）
複数行の揃え方（折り返し時）
align-content
stretch（広がる）
flex-start（上寄せ）
center（中央揃え）
flex-end（下寄せ）
space-between（両端）
space-around（均等）
space-evenly（全て均等）
折り返しの有無
flex-wrap
nowrap（折り返さない）
wrap（折り返す）
wrap-reverse（逆順で折り返す）
子要素同士の間隔（0〜80px）。
gap
0
px
flex（子要素の設定）
flex: 0 0 auto;
Aに適用
Bに適用
Cに適用
Dに適用
Eに適用
Fに適用
Gに適用
flex-grow:
余ったスペースをどの程度伸ばすか。
0(伸ばさない)
1(伸ばす)
2(もっと伸ばす)
flex-shrink:
0(縮まない)
1(縮む)
2(もっと縮む)
スペースが足りないときにどれだけ縮むか
flex-basis:
auto
0
100px
200px
基準サイズ 要素が伸び縮みする前の初期サイズ。autoなら内容に応じたサイズになります。
align-self:
stretch（自動高さ）
flex-start（上寄せ）
center（中央揃え）
flex-end（下寄せ）
baseline（ベースライン）
子要素ごとに垂直方向の揃えを指定する
文字のサイズ:
中
小
大