Flexbox 축 전환 의미
justify-content는 항상 주축, align-items는 항상 교차축을 다루므로 flex-direction이 바뀌면 정렬 방향도 바뀐다.
| 설정 | 주축 | 교차축 | 정렬 해석 |
|---|---|---|---|
| row | 왼쪽에서 오른쪽 | 위아래 방향 | justify는 가로, align은 세로 |
| column | 위에서 아래 | 좌우 방향 | justify는 세로, align은 가로 |
| justify-content | 주축의 남는 공간 배분 | 교차축에는 영향 없음 | direction을 먼저 확인 |
| align-items | 교차축 정렬 | 주축 간격에는 영향 없음 | stretch 기본값 주의 |
| gap | 아이템 사이 간격 | 축과 무관하게 간격 제공 | margin으로 간격을 흩뿌리지 않음 |
Flexbox에서 속성을 외우기보다 먼저 주축이 어디인지 찾으면 정렬 방향이 자연스럽게 따라온다.