Flexbox 정렬 선택 가이드 점검

Flexbox 정렬 기준

Flexbox는 한 축의 흐름을 잡고 남는 공간을 배분하는 도구입니다. 컨테이너 속성과 아이템 속성을 분리해서 판단하면 정렬이 선명해집니다.

판단 기준
01주축 02줄바꿈 03공간 04개별
Direction

row와 column 중 콘텐츠가 자연스럽게 읽히는 주축을 먼저 고릅니다.

Wrap

카드 수가 변하면 flex-wrap과 gap으로 줄바꿈 규칙을 명시합니다.

Align

justify-content는 주축, align-items는 교차축이라는 기준을 유지합니다.

Item

특정 항목만 다르면 flex-grow, flex-basis, align-self를 국소적으로 씁니다.