Item 1
Item 2
Item 3
Item 4
row-reverse(右から左に配置)
Item 1
Item 2
Item 3
Item 4
column(上から下に配置)
Item 1
Item 2
Item 3
Item 4
column-reverse(下から上に配置)
Item 1
Item 2
Item 3
Item 4
子要素の折り返し nowrap(初期値)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
:wrap(折り返し上から下へ)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
: wrap-reverse(折り返し下から上へ)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
justify-content(水平方向の揃え): center
Item 1
Item 2
Item 3
Item 4
: space-between
Item 1
Item 2
Item 3
Item 4
: space-around
Item 1
Item 2
Item 3
Item 4
align-items(垂直方向の揃え): flex-end
Item 1
Item 2
Item 3
Item 4
:center
Item 1
Item 2
Item 3
Item 4
align-content(複数行の揃え): stretch(親要素の高さに合わせて広げて配置)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
:flex-start(上揃え)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
:flex-end(下ぞろえ)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
:center(中央ぞろえ)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
:space-between(子要素を上下の端に配置し残りの要素は均等)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
:space-around(均等に間隔を空けて配置)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13