justify-content:水平方向の揃え方

flex-start:(初期値)

1
2
3
4
5
6

flex-end

1
2
3
4
5
6

center

1
2
3
4
5
6

space-between(均等に間隔を空ける)

1
2
3
4
5
6

space-around(左右の端のアイテムにも半分ずつ間隔を空ける)

1
2
3
4
5
6

align-items:垂直方向の揃え方

flex-start(上揃え)

1
1
1
2
3
3
3
4
5
5
5
6

flex-end(下揃え)

1
1
1
2
3
3
3
4
5
5
5
6

baseline(ベースラインを揃える) ※動作せず

1
1
1
2
3
3
3
4
5
5
5
6

stretch(コンテンツの一番多いアイテムの高さに合わせる)

1
1
1
2
3
3
3
3
4
5
5
5
6