> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/css-grid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/css-grid/box-alignment.md).
# Box 정렬 가이드
[Box 정렬(Alignment)](https://www.w3.org/TR/css-align-3/)의 일부 동작은 레이아웃 방법에 따라 달라집니다. CSS Grid / Flexbox의 각 레이아웃 방법에 따라 아이템 정렬이 어떻게 다르게 설정 되는지 비교해봅니다.
## Box 정렬의 핵심 개념
컨테이너 요소는 포함하는 아이템 자식 요소를 정렬할 수 있습니다. 정렬의 유형을 세부적으로 구분하면 다음 3가지로 나눌 수 있습니다.
* [**위치 정렬**](https://drafts.csswg.org/css-align/#positional-values) - `start`, `end`, `center` 와 같은 키워드
* [**기본 정렬**](https://drafts.csswg.org/css-align/#baseline-values) - `baseline` 키워드와 `first`/`last` 수정자(Modifiers)
* [**분산 정렬**](https://drafts.csswg.org/css-align/#distribution-values) - `stretch`, `space-between`, `space-around`, `space-evenly`
이러한 키워드 값의 대부분은 [**문서의 쓰기 모드(Writing modes)**](https://24ways.org/2016/css-writing-modes/)**와 관련되어 작동**합니다. 글의 흐름이 좌 ⟹ 우 방향이라면 그리드 컨테이너의 왼쪽이 `start` 가 됩니다. 반대로 우 ⟹ 좌 방향이라면 오른쪽이 `start`가 됩니다.
## Block / Inline 축(Axis)
블록과 인라인 축은 다양한 방법으로 사용됩니다. 블록 축은 Grid 사양의 컬럼(Column) 축으로, Flexbox 에서는 교차(Cross) 축으로 사용됩니다. 인라인 축은 Grid에서 로우(Row) 축으로, Flexbox에서는 주(Main) 축으로 사용됩니다.
| **축** | **Grid** | **Flexbox** |
| ----------------- | -------- | ----------- |
| **Block 축 (수직)** | Column 축 | Cross 축 |
| **Inline 축 (수평)** | Row 축 | Main 축 |
{% hint style="warning" %}
Grid는 언제나 명시적인 행/열을 가지고 있어 축을 기준으로 하는 정렬에 대해 이해하기 쉽습니다. \
하지만 Flexbox는 주 축(Main Axis) 방향이 바뀔 때마다 정렬 기준이 변경된다는 점에 유의해야 합니다.
{% endhint %}
### `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 또한 컨테이너에 여유 공간이 있다면 정렬을 수행할 수 있습니다.
## 레퍼런스
{% embed url="" %}
CSS Box 정렬 모듈 레벨 3 | W3C
{% endembed %}
{% embed url="" %}
CSS Box 정렬 | MDN
{% endembed %}
{% embed url="" %}
CSS Grid 레이아웃 & Box 정렬 | MDN
{% endembed %}
{% embed url="" %}
Box 정렬 치트시트 | rachelandrew\.co.uk
{% endembed %}