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

Block 축 (수직)

Column 축

Cross 축

Inline 축 (수평)

Row 축

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 또한 컨테이너에 여유 공간이 있다면 정렬을 수행할 수 있습니다.