교차축 정렬

align-items는 교차축에서 항목 상자의 자리를 정합니다. 높이가 다른 항목들을 위 · 가운데 · 아래 가운데 어디에 맞출지 고르고, 처음 값 normal은 높이를 정하지 않은 항목의 상자를 줄 높이만큼 늘입니다. 늘어나는 것은 글자가 아니라 상자입니다.

사이트 이름이 내비게이션보다 큰 글자인 머리글은, 둘이 한 줄에 있어도 위쪽만 맞으면 어긋나 보입니다. 카드 제목 옆 배지는 아무것도 적지 않았는데 길쭉하게 늘어나기도 합니다. 둘 다 교차축의 자리를 정하지 않아 처음 값이 일한 결과입니다. 이 레슨에서는 align-items의 값 넷, 처음 값이 늘이는 것, 세로 가운데를 어느 요소에 주는지를 봅니다.

그림 준비 중

1값 넷 — 위 · 가운데 · 아래 · 늘이기

row에서 교차축은 세로입니다. 높이 100px 줄에 높이 40px인 '가'와 60px인 '나'를 놓고 align-items: center를 줍니다.

<div class="row">
  <div class="a">가</div>
  <div class="b">나</div>
</div>

.row {
  display: flex;
  align-items: center;
  height: 100px;
}

.a {
  height: 40px;
}

.b {
  height: 60px;
}

두 상자의 세로 가운데가 줄의 세로 가운데에 맞았습니다. 줄은 8px에서 시작하니, '가'는 위에 30px을 두고 38px에서, '나'는 위에 20px을 두고 28px에서 시작합니다.

표의 '가' · '나' 칸은 두 상자의 위 자리입니다.

이 예제의 두 상자는 높이를 정했으니 stretch여도 늘어나지 않고 위 끝에 섭니다.

2처음 값 normal — 정하지 않은 높이를 늘인다

'나'의 높이를 지우고 align-items도 적지 않으면 어떻게 될까요? 상자가 보이게 바탕색을 칠했습니다.

<div class="row">
  <div class="a">가</div>
  <div class="b">나</div>
</div>

.row {
  display: flex;
  height: 100px;
}

.a {
  height: 40px;
}

.row div {
  background: #e8f0fb;
}

높이를 정한 '가'는 40px 그대로이고, 높이를 정하지 않은 '나'만 줄 높이 100px까지 늘었습니다. '나' 글자는 늘어난 상자의 위 끝에 그대로입니다 — 늘어난 것은 상자입니다.

계산된 값은 normal입니다. flex 항목에게 normal은 stretch처럼 일해, 높이를 정하지 않은 항목을 교차축으로 늘입니다. 할 일 화면의 입력 칸과 추가 단추가 같은 높이로 맞는 것도, 주축과 교차축의 예제에서 입력 칸이 묶음 너비만큼 늘어난 것도 이 늘이기입니다(column에서는 교차축이 가로).

3세로 가운데는 부모에

align-items는 부모에 주는 값입니다. 부모가 제 항목 상자들을 교차축 어디에 둘지 정합니다(브라우저 규칙 7). 그래서 항목 하나를 세로 가운데에 두고 싶어도 그 항목이 아니라 부모에 줍니다.

이름이 비슷한 align-content도 있습니다. 항목이 여러 줄로 넘어갔을 때, 그 줄 묶음을 교차축 어디에 둘지 정합니다. 항목이 한 줄뿐이면 할 일이 없습니다 — 여러 줄은 자리가 모자라면 다음 줄로에서 봅니다.

예제

카드 제목 묶음에 높이 48px을 주고 배지에 바탕색을 칠했습니다. 처음 값 그대로면 배지가 묶음 높이만큼 길쭉해집니다.

<div class="recipe-card-head">
  <h2>떡볶이</h2>
  <span class="badge">한식</span>
</div>

.recipe-card-head {
  display: flex;
  height: 48px;
}

h2 {
  margin: 0;
}

.badge {
  background: #e8f0fb;
}

묶음에 align-items: center를 더합니다.

.recipe-card-head {
  align-items: center;
}

배지가 글자만큼의 높이로 줄어 묶음의 세로 가운데에 섰고, 이름도 같은 가운데에 맞았습니다. 묶음 높이를 적지 않아도 배지는 늘어납니다 — 이름 글자가 배지보다 커서 줄이 높고, 배지가 그 줄 높이만큼 늘어나기 때문입니다. 그때도 align-items: center로 가운데에 세웁니다.

자주 틀리는 곳

틀린 생각: align-items의 처음 값은 stretch다.

늘이기처럼 일하니 Computed 창에서 stretch를 찾게 됩니다. 2절 줄의 계산된 값은 normal이었습니다. stretch를 적어 견줘 봅니다.

<div class="row">
  <div class="a">가</div>
  <div class="b">나</div>
</div>

.row {
  display: flex;
  align-items: stretch;
  height: 100px;
}

.a {
  height: 40px;
}

'나'는 normal일 때와 같은 100px입니다. 모양은 같아도 Computed 창의 글자는 적은 값을 따라 다릅니다.

맞는 규칙: 처음 값은 normal이고, flex 항목에게는 stretch처럼 일합니다. 개발자 도구에서 처음 값을 찾을 때는 normal을 봅니다.

틀린 생각: 배지를 세로 가운데에 두려면 배지에 align-items: center를 준다.

<div class="recipe-card-head">
  <h2>떡볶이</h2>
  <span class="badge">한식</span>
</div>

.recipe-card-head {
  display: flex;
  height: 48px;
}

h2 {
  margin: 0;
}

.badge {
  align-items: center;
}

배지는 그대로 48px로 늘어나 있습니다. 배지는 flex를 받은 부모가 아니라, 제 항목이 없어 이 선언이 할 일이 없습니다.

맞는 규칙: align-items는 부모가 제 항목들을 놓는 값입니다. 배지의 자리를 바꾸려면 배지를 담은 묶음에 줍니다(브라우저 규칙 7).

틀린 생각: align-content와 align-items는 같은 일을 한다.

2절 줄에 align-items 대신 align-content: center⁠를 줘 봅니다.

<div class="row">
  <div class="a">가</div>
  <div class="b">나</div>
</div>

.row {
  display: flex;
  align-content: center;
  height: 100px;
}

.a {
  height: 40px;
}

'가'는 위 끝(8px)에 그대로이고, '나'도 그대로 늘어나 있습니다. 항목이 한 줄뿐이라 옮길 줄 묶음이 없습니다.

맞는 규칙: align-items는 한 줄 안에서 항목 상자를, align-content는 여러 줄일 때 줄 묶음을 교차축에서 놓습니다.

확인 문제

1. 예제에서 align-items: center를 flex-end로 바꿨습니다. 배지의 아래 끝은 몇 px이 될까요?

<div class="recipe-card-head">
  <h2>떡볶이</h2>
  <span class="badge">한식</span>
</div>

.recipe-card-head {
  display: flex;
  align-items: flex-end;
  height: 48px;
}

h2 {
  margin: 0;
}

.badge {
  background: #e8f0fb;
}

• ① 56px
• ② 48px
• ③ 배지가 다시 48px 높이로 늘어난다

2. 할 일 한 줄의 체크박스와 글의 세로 가운데를 맞추려 합니다. ____ 자리에 알맞은 CSS 속성을 쓰세요.

<li>
  <input
    type="checkbox"
    aria-label="완료 표시"
  />
  <span class="text">
    우유 사기
  </span>
</li>

li {
  display: flex;
  ____: center;
}

li {
  display: flex;
  align-items: center;
}

3. 여행 일정 칸을 세로로 쌓고 align-items: flex-end⁠를 줬습니다. 일정 칸은 어디로 갈까요?

<div class="trip">
  <div>1일 부산</div>
  <div>2일 경주</div>
</div>

.trip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 200px;
}

.trip div {
  width: 80px;
  height: 30px;
}

• ① 상자의 오른쪽 끝으로
• ② 상자의 아래 끝으로
• ③ 움직이지 않는다

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. hello.html의 body 안을 2절 줄 코드로, style 요소 안을 2절 CSS로 바꿔 저장 · 새로고침합니다. .row 규칙에 align-items 줄을 더하고 값을 flex-start · center · flex-end · stretch로 바꿔 봅니다. 바탕색이 칠해진 '나'의 상자가 늘고 줄며, '가'는 40px 그대로 위치만 옮깁니다. Computed 창에서 .row의 align-items가 적은 값으로 바뀌는 것도 봅니다. 파일을 만들고 여는 법은 준비: VS Code와 작업 폴더에 있습니다.