〈 flex アイテム整列プロパティ 〉

１、主軸方向の整列　justify-content

flex-start

A
B
C

flex-end

A
B
C

center

A
B
C

space-between

A
B
C

space-around

A
B
C

２、交差軸方向の整列　align-items

stretch

A
B
C
D

flex-start

A
B
C
D

flex-end

A
B
C
D

center

A
B
C
D

baseline

A
B
C
D

３、flex アイテム「B」交差軸方向の整列　align-self

auto

A
B
C
D

flex-start

A
B
C
D

flex-end

A
B
C
D

center

A
B
C
D

baseline

A
B
C
D

stretch

A
B
C
D

４、flex ラインの収納　align-content

stretch

A
B
C
D
E
F

flex-start

A
B
C
D
E
F

flex-end

A
B
C
D
E
F

center

A
B
C
D
E
F

space-between

A
B
C
D
E
F

space-around

A
B
C
D
E
F