HTML/CSS 3.2 · 3부. 배치

Flexbox 정렬

남는 자리를 어디에 둘지 정합니다. 두 축을 구분합니다.

예상 학습 시간 17분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 초급

개념 설명

남는 자리를 어떻게 나눌까

항목을 나란히 놓고 나면 대개 자리가 남습니다. 그 자리를 어디에 둘지 정하는 것이 정렬입니다.

속성은 둘뿐이고, 3.1 에서 본 두 축에 하나씩 붙습니다.

속성	다루는 축	기본 방향에서
`justify-content`	주축	가로 —
`align-items`	교차축	세로 \|

최소 예제 · 편집 가능

주축 정렬

값을 하나씩 바꿔 가며 확인하십시오. 여섯 가지가 있습니다.

<div class="row">
  <div class="item">하나</div>
  <div class="item">둘</div>
  <div class="item">셋</div>
</div>

.row {
  display: flex;
  background: #f1f3f5;
  padding: 10px;

  /* flex-start · center · flex-end
     space-between · space-around · space-evenly */
  justify-content: space-between;
}

.item { background: #ece7fb; padding: 12px; }

값	남는 자리를
`flex-start`	뒤에 몰아둡니다. 기본값입니다.
`center`	앞뒤로 나눕니다. 가운데 정렬입니다.
`flex-end`	앞에 몰아둡니다.
`space-between`	항목 사이에만 나눕니다. 양끝은 붙습니다.
`space-around`	항목마다 좌우로 같게. 양끝은 절반입니다.
`space-evenly`	모든 틈을 똑같이 나눕니다.

space-between 은 머리말에서 가장 많이 쓰입니다 — 로고를 왼쪽, 차림표를 오른쪽에 두는 배치가 이 값 하나로 됩니다.

최소 예제 · 편집 가능

교차축 정렬

높이가 서로 다른 항목을 세로로 어디에 맞출지 정합니다.

<div class="row">
  <div class="item">짧은 항목</div>
  <div class="item tall">높은<br>항목<br>입니다</div>
  <div class="item">짧은 항목</div>
</div>

.row {
  display: flex;
  gap: 10px;
  background: #f1f3f5;
  padding: 10px;

  /* stretch(기본) · flex-start · center · flex-end · baseline */
  align-items: center;
}

.item { background: #ece7fb; padding: 10px; }

기본값은 stretch 입니다 — 항목이 가장 높은 것에 맞춰 늘어납니다. 카드를 나란히 놓았을 때 높이가 저절로 맞는 것이 이 때문입니다. center 로 바꾸면 늘어나지 않고 가운데에 놓입니다.

상세 사용법

가운데 정렬

가로 세로 모두 가운데에 두려면 두 줄이면 됩니다. 예전에는 어려웠던 일입니다.

<div class="center">
  <div class="item">가운데</div>
</div>

.center {
  display: flex;
  justify-content: center;  /* 가로 */
  align-items: center;      /* 세로 */

  height: 160px;
  background: #f1f3f5;
}

.item { background: #6e56cf; color: #fff; padding: 14px 22px; }

세로 가운데 정렬은 부모에 높이가 있어야 합니다. 높이가 내용만큼이면 이미 가운데이기 때문입니다.

상세 사용법

항목 하나만 다르게

align-self 를 항목에 주면 그 항목만 교차축 정렬이 달라집니다. margin-left: auto 는 그 항목부터 오른쪽으로 밀어냅니다.

style.css

/* 이 항목만 위에 붙입니다 */
.item.top { align-self: flex-start; }

/* 이 항목부터 오른쪽으로 밀어냅니다 — 차림표 끝의 로그인 단추 */
.item.right { margin-left: auto; }

흔한 실수

세 가지

두 속성을 바꿔 씁니다. 가로로 놓았는데 세로로 가운데를 맞추려고 justify-content 를 적는 경우입니다. justify-content 는 주축이고, 주축은 flex-direction 이 정합니다.
flex-direction: column 인데 축을 그대로 생각합니다. 세로로 놓으면 주축이 세로가 되어 두 속성의 방향이 서로 바뀝니다.
세로 가운데가 안 됩니다. 부모에 높이가 없는 것입니다. 높이를 주거나 min-height 를 지정하십시오.

실습 문제

직접 해보기

1. 머리말 배치 난이도 중

로고는 왼쪽 끝, 차림표는 오른쪽 끝에 두고 세로로는 가운데에 맞추십시오.

항목이 둘일 때 양끝으로 벌리는 값이 있습니다. 세로 가운데는 교차축입니다.

header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }

요약

정리

justify-content 는 주축, align-items 는 교차축입니다.
space-between 은 양끝에 붙이고 사이만 벌립니다.
교차축 기본값은 stretch 라 높이가 저절로 맞습니다.
세로 가운데 정렬은 부모에 높이가 있어야 합니다.