レイアウト

display: flex

初期値

item 1
item 2
item 3
item 4
item 1
item 2
item 3
item 4
item 1
item 2
item 3
item 4

flex-wrap

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8

justify-content

justify-content: flex-start

item 1
item 2
item 3

justify-content: flex-end

item 1
item 2
item 3

justify-content: center

item 1
item 2
item 3

justify-content: space-between

item 1
item 2
item 3

justify-content: space-around

item 1
item 2
item 3

align-items

align-items: stretch

item 1
item 2
item 3

align-items: flex-start

item 1
item 2
item 3

align-items: flex-end

item 1
item 2
item 3

align-items: center

item 1
item 2
item 3

align-items: baseline

item1
item2
item3
item4

align-content

align-content: stretch;

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8

align-content: flex-start;

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8

align-content: flex-end;

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8

align-content: center;

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8

align-content: space-between;

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8

align-content: space-around;

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8