Flexbox 축과 정렬 판단
Flexbox는 컨테이너 안의 아이템을 한 방향 축으로 배치하고 남는 공간과 정렬 방식을 조절한다.
| 판단 항목 | 선택 기준 | 관련 속성 | 주의점 |
|---|---|---|---|
| 한 줄 배치 | 아이템을 가로 또는 세로 한 축으로 놓음 | display:flex | 2차원 배치는 grid 검토 |
| 방향 | 콘텐츠 읽기 순서와 화면 방향 일치 | flex-direction | row/column 전환 시 정렬 의미 변화 |
| 간격 | 아이템 사이 일정한 공간 | gap | margin으로 개별 조정 남발 |
| 정렬 | 남는 공간과 교차축 위치 조절 | justify, align | 주축·교차축 혼동 |
| 반응형 | 좁은 화면에서 줄바꿈 또는 세로 전환 | wrap, media query | 고정 폭으로 overflow 발생 |
Flexbox는 “정렬 속성 모음”이 아니라 한 축의 흐름을 만들고 남는 공간을 다루는 배치 모델이다.