Web · flex

Flexbox 축·정렬 속성

주축과 교차축을 먼저 정한 뒤 각 정렬 속성이 어느 방향에 작동하는지 구분합니다.

Flex 정렬 역할

layout

row/column으로 주축 방향을 정합니다.

주축에서 남는 공간을 배분합니다.

한 줄 안에서 교차축 위치를 맞춥니다.

여러 줄일 때 줄 묶음 전체를 정렬합니다.

아이템 사이 간격을 축과 무관하게 둡니다.

direction → main axis → justify → cross axis → align

Flexbox 정렬은 속성 이름을 외우기보다 먼저 주축이 어디인지 정하면 대부분 자연스럽게 풀립니다.