Flexbox와 Grid에서 justify-content와 align-items 속성 사용법

CSS에서 요소를 중앙에 배치하거나 정렬하려면 justify-content와 align-items 속성을 사용해야 합니다. 그러나 이 속성들은 Flexbox나 Grid 레이아웃 컨테이너에서만 동작합니다. 이 포스팅에서는 Flexbox와 Grid 컨테이너에서 이 속성들이 어떻게 작동하는지 설명하겠습니다.

---

1. justify-content와 align-items의 개념

• justify-content: 주축(main axis)을 따라 자식 요소를 정렬합니다.
• align-items: 교차축(cross axis)을 따라 자식 요소를 정렬합니다.

---

2. Flexbox와 Grid 설정 예시

(1) display 속성이 없는 경우

.container {
  justify-content: center; /* 효과 없음 */
  align-items: center;    /* 효과 없음 */
}

Flexbox나 Grid가 적용되지 않으면 justify-content와 align-items는 아무런 효과도 없습니다.

(2) Flexbox 컨테이너

.flex-container {
  display: flex;
  justify-content: center; /* 수평 가운데 정렬 */
  align-items: center;    /* 수직 가운데 정렬 */
}

display: flex를 선언하면 justify-content와 align-items가 적용되어 자식 요소가 수평과 수직으로 중앙에 정렬됩니다.

(3) Grid 컨테이너

.grid-container {
  display: grid;
  justify-content: center; /* 수평 가운데 정렬 */
  align-items: center;    /* 수직 가운데 정렬 */
}

Grid에서도 동일하게 중앙 정렬이 이루어집니다.

---

3. 주요 속성 정리

• justify-content: 주축(main axis)을 기준으로 정렬합니다.
  예: flex-start, center, space-between, space-around, space-evenly 등
• align-items: 교차축(cross axis)을 기준으로 정렬합니다.
  예: flex-start, center, baseline, stretch 등
• align-self: 개별 아이템의 교차축 정렬을 설정합니다.
• justify-self: 개별 아이템의 주축 정렬 (Grid에서만 사용 가능)

---

4. 마무리

justify-content와 align-items는 요소 정렬에서 매우 중요한 역할을 하지만, 반드시 Flexbox나 Grid 컨테이너 안에서만 동작한다는 점을 기억해야 합니다. 따라서 먼저 display: flex 또는 display: grid를 설정하는 것이 필수입니다.

이 글이 여러분의 CSS 레이아웃 구성에 도움이 되기를 바랍니다!