Flexbox 축·정렬 속성
주축과 교차축을 먼저 정한 뒤 각 정렬 속성이 어느 방향에 작동하는지 구분한다.
| 속성 | 작동 대상 | 주요 값 | 확인 질문 |
|---|---|---|---|
| display:flex | 자식을 flex item으로 만듦 | flex, inline-flex | 정렬하려는 부모에 적용했는가 |
| flex-direction | 주축 방향 결정 | row, column | 콘텐츠 흐름과 맞는가 |
| justify-content | 주축 남는 공간 배분 | center, space-between | 남는 공간이 실제로 있는가 |
| align-items | 교차축 정렬 | stretch, center, flex-start | 높이나 폭 기준이 분명한가 |
| flex-wrap | 아이템 줄바꿈 허용 | nowrap, wrap | 좁은 화면에서 넘치지 않는가 |
Flex 정렬 문제는 속성 이름보다 부모, 주축, 남는 공간, 줄바꿈 허용 여부를 함께 봐야 풀린다.