자리가 모자라면 다음 줄로

flex는 처음에 줄을 바꾸지 않습니다. flex-wrap의 처음 값 nowrap은 항목을 모두 한 줄에 두고, flex-wrap: wrap이면 들어가지 않는 항목이 다음 줄로 넘어갑니다. 여러 줄이 되어도 줄마다 따로 놓일 뿐 격자가 되지는 않습니다.

김치볶음밥 페이지에 재료 이름을 작은 꼬리표로 늘어놓는다고 합시다. 넓은 창에서는 한 줄에 다 들어가지만, 휴대전화처럼 좁은 창에서는 꼬리표가 창 밖으로 밀려 가로로 밀어야 보입니다. 줄을 바꾸라고 적어 주지 않았기 때문입니다. 이 레슨에서는 한 줄을 지키는 처음 값, 다음 줄로 넘기는 wrap, 줄 사이 간격, 그리고 여러 줄 flex가 격자와 다른 점을 봅니다.

그림 준비 중

1처음 값 nowrap — 한 줄을 지킨다

너비 60px 꼬리표 다섯을 간격 8px로 놓으면 줄 길이가 332px입니다. 폭 280px 창에 그려 봅니다. 꼬리표는 배지처럼 줄지 않게 flex-shrink: 0을 줬습니다.

<div class="tags">
  <span>밥</span>
  <span>김치</span>
  <span>달걀</span>
  <span>참기름</span>
  <span>김가루</span>
</div>

.tags {
  display: flex;
  gap: 8px;
}

.tags span {
  flex-shrink: 0;
  width: 60px;
  height: 32px;
}

꼬리표가 한 줄을 지켜, 페이지가 창보다 60px 넓어졌습니다. '페이지의 너비'는 페이지 내용 전체의 너비, '창의 너비'는 보이는 창의 너비입니다 — 페이지가 더 넓으면 가로로 밀어야 끝이 보입니다.

flex-shrink가 처음 값 1이면 꼬리표가 먼저 줄어들고 글이 꺾입니다. 줄 수 있는 데까지 줄어든 뒤에도 자리가 모자라면 그때 넘칩니다. 어느 쪽이든 줄은 하나입니다.

2wrap — 들어가지 않는 항목은 다음 줄로

같은 꼬리표 줄에 flex-wrap: wrap을 더합니다.

<div class="tags">
  <span>밥</span>
  <span>김치</span>
  <span>달걀</span>
  <span>참기름</span>
  <span>김가루</span>
</div>

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags span {
  flex-shrink: 0;
  width: 60px;
  height: 32px;
}

창 안 줄의 길이는 264px(280 − 양쪽 body 여백 16)입니다. 꼬리표 넷(60 × 4 + 8 × 3 = 264px)까지 첫 줄에 들고, 다섯째 '김가루'는 둘째 줄 맨 앞(8px)으로 넘어갔습니다.

둘째 줄은 48px에서 시작합니다. 첫 줄 8px + 꼬리표 높이 32px 다음에 gap 8px이 한 번 더 들었습니다 — 값 하나로 적은 gap은 같은 줄의 항목 사이와 줄 사이에 모두 듭니다. HTML에 줄바꿈 요소를 넣을 필요가 없고, 창을 다시 넓히면 꼬리표가 앞 줄로 돌아옵니다.

예제

휴대전화 폭(360px)에서 같은 재료 꼬리표 줄을 그려 봅니다.

<div class="tags">
  <span>밥</span>
  <span>김치</span>
  <span>달걀</span>
  <span>참기름</span>
  <span>김가루</span>
</div>

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags span {
  flex-shrink: 0;
  width: 60px;
  height: 32px;
}

창 안 줄의 길이가 344px이라, 332px인 꼬리표 줄이 한 줄에 다 들었습니다. 페이지의 너비도 창과 같아 가로로 밀 일이 없습니다. wrap은 모자랄 때만 줄을 바꾸니, 넓은 창에서는 처음 값과 같은 모양입니다.

자주 틀리는 곳

틀린 생각: 여러 줄로 넘긴 flex는 줄마다 칸이 맞는 격자가 된다.

꼬리표가 줄을 채우게 flex-grow: 1을 줘 봅니다.

<div class="tags">
  <span>밥</span>
  <span>김치</span>
  <span>달걀</span>
  <span>참기름</span>
  <span>김가루</span>
</div>

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags span {
  flex-grow: 1;
  width: 60px;
  height: 32px;
}

첫 줄의 꼬리표는 60px인데, 둘째 줄의 '김가루'는 혼자 줄 전체(264px)로 늘었습니다. flex는 줄마다 남는 자리를 따로 나눠, 위아래 줄의 칸이 맞지 않습니다.

맞는 규칙: flex는 한 줄씩 놓습니다. 줄이 바뀌어도 위아래 칸을 맞추려면 grid를 씁니다(13단원 flex 여러 줄과 grid).

틀린 생각: 줄 사이는 항목의 바깥 여백으로 띄운다.

<div class="tags">
  <span>밥</span>
  <span>김치</span>
  <span>달걀</span>
  <span>참기름</span>
  <span>김가루</span>
</div>

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags span {
  flex-shrink: 0;
  margin-bottom: 8px;
  width: 60px;
  height: 32px;
}

둘째 줄이 2절의 48px이 아니라 56px에서 시작합니다. gap이 이미 줄 사이에 8px을 넣었는데 바깥 여백 8px이 더해졌고, 마지막 줄 아래에도 여백이 붙었습니다.

맞는 규칙: 줄 사이도 부모의 gap이 띄웁니다. 줄 사이와 항목 사이를 다르게 하려면 gap에 값을 둘 적습니다(gap: 12px 8px — 앞이 줄 사이, 뒤가 항목 사이).

틀린 생각: 줄을 바꿀 때는 빈 자리에 맞는 항목이 먼저 올라간다.

첫 줄에 빈 자리가 남았고 뒤에 짧은 항목이 있으면, 그 항목이 빈 자리로 올라갈 것 같습니다.

<div class="tags">
  <span class="long">김치</span>
  <span class="long">달걀</span>
  <span class="long">대파</span>
  <span>깨</span>
</div>

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags span {
  flex-shrink: 0;
  width: 40px;
  height: 32px;
}

.tags .long {
  width: 100px;
}

첫 줄은 100px 꼬리표 둘로 208px이라 56px이 남고, 40px인 '깨'는 그 자리에 들어갈 수 있습니다. 그래도 '깨'는 셋째 '대파' 뒤, 둘째 줄(48px)에 놓였습니다.

맞는 규칙: wrap은 HTML 차례대로 줄을 채웁니다. 앞 항목이 안 들어가는 자리에서 줄을 바꾸고, 뒤 항목을 앞 줄로 올리지 않습니다 — 차례는 나무의 차례 그대로입니다(브라우저 규칙 2).

확인 문제

1. 예제의 꼬리표 줄 끝에 <span>대파</span>을 하나 더했습니다. 폭 360px 창에서 줄 수는 몇이 될까요?

<div class="tags">
  <span>밥</span>
  <span>김치</span>
  <span>달걀</span>
  <span>참기름</span>
  <span>김가루</span>
  <span>대파</span>
</div>

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags span {
  flex-shrink: 0;
  width: 60px;
  height: 32px;
}

• ① 1 — 여섯이 한 줄에 든다
• ② 2 — '대파'가 다음 줄로
• ③ 1 — 대신 페이지가 창보다 넓어진다

2. 좁은 창에서도 재료 꼬리표가 옆으로 넘치지 않게 하려 합니다. ____ 자리에 알맞은 선언을 쓰세요.

.tags {
  display: flex;
  ____
  gap: 8px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

3. 동아리 공지의 부원 이름 꼬리표를 이렇게 놓았습니다. 폭 200px 창에서 결과 화면은 어떻게 보일까요?

<div class="members">
  <span>민지</span>
  <span>준호</span>
  <span>서연</span>
</div>

.members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.members span {
  flex-shrink: 0;
  width: 80px;
  height: 30px;
}

• ① 한 줄 — 셋이 나란히, 마지막이 창 밖으로
• ② 두 줄 — 첫 줄에 둘, 둘째 줄에 '서연'
• ③ 세 줄 — 한 줄에 하나씩

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. hello.html의 body 안을 2절 꼬리표 줄로, style 요소 안을 2절 CSS로 바꾸고, .tags 규칙에 width: 400px; 한 줄을 더해 저장 · 새로고침합니다. 꼬리표 위에서 마우스 오른쪽 단추 → 검사를 누르고, Elements 패널에서 꼬리표를 담은 div를 고릅니다. Styles 창의 .tags 규칙에서 400px을 200px로 바꾸면(값을 누르고 새 값을 친 뒤 Enter) 꼬리표가 다음 줄로 넘어가고, 다시 400px로 바꾸면 앞 줄로 돌아옵니다. 이번에는 200px에서 flex-wrap: wrap 선언 앞의 체크박스를 꺼 봅니다 — 꼬리표가 다시 한 줄이 되어 200px 칸보다 길게 이어집니다. 파일을 만들고 여는 법은 준비: VS Code와 작업 폴더에 있습니다.