Box 정렬 가이드

Box 정렬(Alignment)의 일부 동작은 레이아웃 방법에 따라 달라집니다. CSS Grid / Flexbox의 각 레이아웃 방법에 따라 아이템 정렬이 어떻게 다르게 설정 되는지 비교해봅니다.

Box 정렬의 핵심 개념

컨테이너 요소는 포함하는 아이템 자식 요소를 정렬할 수 있습니다. 정렬의 유형을 세부적으로 구분하면 다음 3가지로 나눌 수 있습니다.

위치 정렬 - start, end, center 와 같은 키워드
기본 정렬 - baseline 키워드와 first/last 수정자(Modifiers)
분산 정렬 - stretch, space-between, space-around, space-evenly

이러한 키워드 값의 대부분은 문서의 쓰기 모드(Writing modes)와 관련되어 작동합니다. 글의 흐름이 좌 ⟹ 우 방향이라면 그리드 컨테이너의 왼쪽이 start 가 됩니다. 반대로 우 ⟹ 좌 방향이라면 오른쪽이 start가 됩니다.

Block / Inline 축(Axis)

블록과 인라인 축은 다양한 방법으로 사용됩니다. 블록 축은 Grid 사양의 컬럼(Column) 축으로, Flexbox 에서는 교차(Cross) 축으로 사용됩니다. 인라인 축은 Grid에서 로우(Row) 축으로, Flexbox에서는 주(Main) 축으로 사용됩니다.

Grid는 언제나 명시적인 행/열을 가지고 있어 축을 기준으로 하는 정렬에 대해 이해하기 쉽습니다. 하지만 Flexbox는 주 축(Main Axis) 방향이 바뀔 때마다 정렬 기준이 변경된다는 점에 유의해야 합니다.

`align-self` / `align-items`

align-* 속성은 블록 축(수직 방향)과 관련된 속성입니다. Grid 레이아웃은 Column 축에 해당되며, 명확하게 수직 방향으로만 정렬이 설정됩니다. 반면 Flexbox는 flex-direction 속성 설정에 따라 교차 축의 방향이 바뀌기 때문에, 교차 축에 영향을 받는 align-* 속성의 정렬 또한 바뀝니다.

`justify-self` / `justify-items`

justify-* 속성은 인라인 축(수평 방향)과 관련된 속성입니다. Grid 레이아웃은 Row 축에 해당되며, 명확하게 수 방향으로만 정렬이 설정됩니다. 반면 Flexbox 에는 justify-self, justify-items과 같은 속성을 지원하지 않습니다. 개별 아이템을 주 축 방향을 기준으로 정렬하고자 한다면 margin 속성을 사용 합니다.

`align-content`

align-content 속성은 블록 축(수직 방향)과 관련된 속성입니다. Grid 레이아웃은 Column 축에 해당되며, 그리드 컨테이너에 여유 공간이 존재할 경우 정렬이 반영됩니다. Flexbox 또한 컨테이너에 여유 공간이 있다면 정렬을 수행할 수 있습니다.

`justify-content`

justify-content 속성은 블록 축(수직 방향)과 관련된 속성입니다. Grid 레이아웃은 Column 축에 해당되며, 그리드 컨테이너에 여유 공간이 존재할 경우 정렬이 반영됩니다. Flexbox 또한 컨테이너에 여유 공간이 있다면 정렬을 수행할 수 있습니다.