row: 주축은 가로
A
B
C
교차축은 세로 방향입니다.
Flex 판단 흐름
축을 정하면 정렬 선택이 쉬워진다
direction으로 주축을 정하고, 남는 공간과 줄바꿈 여부를 차례로 판단합니다.
column: 주축은 세로
A
B
C
교차축은 가로 방향입니다.
1
방향 선택
아이템이 흐를 주축을 먼저 정합니다.
rowcolumn
2
주축 정렬
주축의 남는 공간을 어떻게 나눌지 고릅니다.
justify-content
3
교차축 정렬
한 줄 안에서 아이템 높이와 위치를 맞춥니다.
align-items
4
간격과 줄바꿈
아이템 사이 간격과 넘칠 때의 다음 줄 이동을 정합니다.
gapflex-wrap