HTML/CSS 3.1 · 3부. 배치

Flexbox 기초

부모에 한 줄을 더하면 자식이 나란히 놓입니다.

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

개념 설명

줄을 나란히 놓는 방법

2부까지는 요소가 위에서 아래로 쌓였습니다. 가로로 나란히 놓으려면 그 자리를 다스릴 방법이 필요합니다. 그것이 Flexbox 입니다.

쓰는 법은 두 걸음입니다. 부모에 display: flex 를 주면, 그 바로 아래 자식들이 나란히 놓입니다. 자식은 아무것도 적지 않아도 됩니다.

최소 예제 · 편집 가능

한 줄만 바꾸면 됩니다

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

/* 이 한 줄이 전부입니다. display 를 지우고 다시 그려 보십시오. */
.row {
  display: flex;
  gap: 12px;   /* 항목 사이 간격 */
}

.item {
  background: #ece7fb;
  padding: 14px;
  border-radius: 8px;
}

gap 으로 간격을 줍니다. 예전에는 항목마다 margin 을 주고 마지막 항목의 여백을 지웠지만, 지금은 부모에 한 줄이면 됩니다.

상세 사용법

두 축

Flexbox 를 다루려면 축 두 개를 구분해야 합니다. 뒤에 나오는 정렬 속성이 모두 이 둘로 갈리기 때문입니다.

축	기본 방향	다루는 속성
주축	가로 →	`justify-content`
교차축	세로 ↓	`align-items`

주축의 방향은 flex-direction 이 정합니다. 그것을 column 으로 바꾸면 주축이 세로가 되고, 두 정렬 속성이 가리키는 방향도 함께 바뀝니다.

<p>row (기본값)</p>
<div class="row">
  <div class="item">하나</div>
  <div class="item">둘</div>
</div>

<p>column</p>
<div class="col">
  <div class="item">하나</div>
  <div class="item">둘</div>
</div>

.row, .col { display: flex; gap: 8px; margin-bottom: 12px; }

/* 주축을 세로로 돌립니다 */
.col { flex-direction: column; }

.item { background: #ece7fb; padding: 10px; border-radius: 6px; }

값	방향
`row`	왼쪽에서 오른쪽으로. 기본값입니다.
`column`	위에서 아래로.
`row-reverse`	오른쪽에서 왼쪽으로.
`column-reverse`	아래에서 위로.

상세 사용법

바로 아래 자식만 항목이 됩니다

display: flex 는 한 단계만 영향을 줍니다. 손자는 평소대로 놓입니다. 그래서 안쪽을 다시 나란히 놓으려면 그 부모에도 flex 를 줘야 합니다.

<div class="row">
  <div class="item">
    <span>안쪽 하나</span>
    <span>안쪽 둘</span>
  </div>
  <div class="item">바깥 둘</div>
</div>

.row { display: flex; gap: 12px; }
.item { background: #ece7fb; padding: 12px; }

/* 이 줄을 살려 보십시오. 안쪽 span 도 나란히 놓입니다. */
/* .item { display: flex; gap: 6px; } */

흔한 실수

세 가지

자식에게 display: flex 를 줍니다. 나란히 놓으라는 것은 부모에게 하는 말입니다. 자식에 적으면 그 자식의 안쪽만 바뀝니다.
gap 대신 항목마다 margin 을 줍니다. 마지막 항목의 여백을 다시 지워야 하고, 줄이 바뀌면 어긋납니다.
손자까지 나란히 놓일 것으로 기대합니다. 한 단계만 영향을 줍니다.

실습 문제

직접 해보기

1. 차림표 만들기 난이도 하

목록(ul) 안의 항목을 가로로 나란히 놓고 사이를 16px 띄우십시오. 점은 없애십시오.

나란히 놓으라는 말은 부모인 ul 에게 합니다. 점은 list-style: none 으로 없앱니다.

ul { display: flex; gap: 16px; list-style: none; padding: 0; }

요약

정리

부모에 display: flex 를 주면 바로 아래 자식이 나란히 놓입니다.
간격은 gap 으로 줍니다.
주축은 flex-direction 이 정하고, 기본은 가로입니다.
한 단계만 영향을 줍니다. 손자는 평소대로 놓입니다.