실행 가능한 CSS 문서: flex-wrap 줄바꿈

Q: flex-wrap: wrap은 무엇을 하나요?

flex 항목이 한 행에 들어가지 않을 때 새 줄로 넘어가게 해요. 기본값 nowrap에서는 항목이 한 줄에 머물면서 줄어들고, 더 줄어들 수 없으면 컨테이너를 넘쳐요.

Q: flex-wrap이 동작하지 않는 이유는 무엇인가요?

줄바꿈은 항목들의 시작 크기 합이 컨테이너보다 클 때만 일어나요. flex: 1 항목은 flex-basis 0에서 시작해서 절대 줄바꿈되지 않으니, 실제 시작 크기(flex: 1 1 200px나 width: 200px)를 주세요. flex-wrap이 항목이 아니라 flex 컨테이너에 있는지도 확인하세요.

Q: flex-direction row와 column은 무엇이 다른가요?

row(기본값)는 항목을 글쓰기 방향으로 나란히 놓고, column은 위에서 아래로 쌓아요. 주축도 함께 돌아서 열에서는 justify-content가 세로로, align-items가 가로로 동작해요.

Q: flex-flow는 무엇인가요?

flex-direction과 flex-wrap을 선언 하나로 쓰는 단축 속성이에요. flex-flow: row wrap;은 flex-direction: row; flex-wrap: wrap;과 같아요.

Q: align-items와 align-content는 무엇이 다른가요?

align-items는 줄 안에서 항목을 배치해요. align-content는 컨테이너 안에서 줄 자체를 배치해서, 컨테이너에 flex-wrap: wrap이 있고 줄들보다 높을 때만 의미가 있어요.

flex-wrap: 한 줄, 또는 필요한 만큼

기본적으로 flex 컨테이너는 모든 항목을 한 줄에 두고(flex-wrap: nowrap) 맞도록 줄여요. flex-wrap: wrap을 주면 대신 항목이 크기를 유지하고 다음 줄로 넘어가요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-wrap</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; gap: 8px; width: 340px; padding: 8px; background: #e5e7eb; margin-bottom: 12px; }
    .item { width: 100px; height: 36px; background: #2563eb; color: white; }
    .wrap { flex-wrap: wrap; }
  </style>
</head>
<body>
  <code>flex-wrap: nowrap (default)</code>
  <div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <code>flex-wrap: wrap</code>
  <div class="box wrap"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <script>
    document.querySelectorAll('.box').forEach((box) => {
      box.children[0].textContent = Math.round(box.children[0].getBoundingClientRect().width) + 'px wide';
    });
  </script>
</body>
</html>

각 항목은 100px을 원하고, 340px 상자에 다섯 개가 있어요. 항목 다섯 개와 8px 간격 네 개에는 532px이 필요해서, 줄바꿈이 없으면 flex 항목이 기본적으로 줄어들기 때문에 각 항목이 약 62px로 짓눌려요. wrap을 주면 100px을 유지해요. 첫 줄에 세 개가 들어가고 나머지 두 개는 둘째 줄로 넘어가요.

flex-wrap 값

값	일어나는 일
`nowrap` (기본값)	한 줄. 항목이 줄어들고, 더 줄어들 수 없으면 컨테이너를 넘쳐요
`wrap`	들어가지 않는 항목이 아래에 새 줄을 시작해요
`wrap-reverse`	같지만 새 줄이 위로 쌓여요. 첫 줄이 맨 아래에 있어요

항목이 줄바꿈되는 모습 보기

슬라이더를 끌어서 컨테이너 너비를 바꿔 보세요. 표시 창이 줄 수와 줄마다 항목이 몇 개인지 알려 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrap slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    #box { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: #e5e7eb; margin: 10px 0; }
    .item { width: 90px; height: 40px; background: #16a34a; color: white; display: flex; align-items: center; justify-content: center; }
  </style>
</head>
<body>
  <label>container width <input id="w" type="range" min="120" max="620" value="400"> <span id="wv"></span></label>
  <div id="box"></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    for (let i = 1; i <= 6; i++) box.insertAdjacentHTML('beforeend', '<div class="item">' + i + '</div>');
    const update = () => {
      const w = document.getElementById('w').value;
      box.style.width = w + 'px';
      document.getElementById('wv').textContent = w + 'px';
      const lines = {};
      [...box.children].forEach((c) => { const top = Math.round(c.getBoundingClientRect().top); lines[top] = (lines[top] || 0) + 1; });
      const counts = Object.values(lines);
      document.getElementById('out').textContent = counts.length + ' line(s): ' + counts.join(' + ') + ' items';
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

400px에서는 90px 항목 네 개와 8px 간격 세 개(384px)가 한 줄에 들어가서 4 + 2가 돼요. 620px 쪽으로 끌면 여섯 개가 모두 한 줄에 들어가고, 120px 쪽으로 끌면 항목마다 한 줄씩 차지해요.

flex-direction: 행 또는 열

flex-direction은 항목이 흐르는 방향, 즉 주축을 정해요.

값	항목이 흐르는 방향	첫 항목
`row` (기본값)	글쓰기 방향으로 나란히	줄의 시작
`row-reverse`	나란히, 반대로	줄의 끝
`column`	위에서 아래로 쌓임	맨 위
`column-reverse`	아래에서 위로 쌓임	맨 아래

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-direction</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .box { display: flex; gap: 4px; padding: 6px; background: #e5e7eb; width: 160px; height: 110px; margin-top: 4px; }
    .box div { background: #2563eb; color: white; padding: 4px 10px; }
  </style>
</head>
<body>
  <div class="grid">
    <div><code>row</code><div class="box" style="flex-direction: row"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>row-reverse</code><div class="box" style="flex-direction: row-reverse"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column</code><div class="box" style="flex-direction: column"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column-reverse</code><div class="box" style="flex-direction: column-reverse"><div>1</div><div>2</div><div>3</div></div></div>
  </div>
</body>
</html>

두 row 상자에서는 align-items: stretch가 행을 가로질러 동작해서 항목이 상자 높이 전체로 늘어나요. column 상자에서는 같은 이유로 대신 너비 전체로 늘어나요. 축이 돌았고, 모든 정렬 속성도 함께 돌았어요(justify-content 페이지에서 자세히 보여 줘요).

flex-flow: 둘을 한 줄로

flex-flow는 flex-direction 다음에 flex-wrap을 쓰는 단축 속성이에요.

.cards { flex-flow: row wrap; }      /* flex-direction: row; flex-wrap: wrap; */
.stack { flex-flow: column nowrap; } /* flex-direction: column; flex-wrap: nowrap; */

미디어 쿼리 없이 wrap으로 만드는 반응형 카드

각 항목에 flex: 1 1 180px로 시작 크기를 주고 행이 줄바꿈되게 하세요. 각 항목은 자기 줄을 채우도록 커지고, 한 줄에 180px 항목이 더 들어가지 않으면 다음 항목이 줄바꿈돼요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrapping cards</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: flex; flex-wrap: wrap; gap: 12px; }
    .card {
      flex: 1 1 180px; /* grow, shrink, start at 180px */
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #f9fafb;
    }
  </style>
</head>
<body>
  <div class="cards">
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
    <div class="card">Four</div>
    <div class="card">Five</div>
  </div>
</body>
</html>

너비 약 800px인 미리보기에서는 첫 줄에 카드 세 개(각 약 253px)가 들어가고, 마지막 두 개는 둘째 줄을 나눠 쓰면서 각각 약 386px로 커져요. flexbox는 이렇게 동작해요. 줄마다 자기 공간을 나누기 때문에, 짧은 마지막 줄의 카드는 위의 카드보다 넓어져요. 마지막 카드도 다른 카드와 같은 너비를 유지하게 하려면 대신 repeat(auto-fill, minmax(180px, 1fr))를 쓴 grid를 쓰세요(grid 페이지를 보세요).

align-content: 줄 간격 정하기

컨테이너가 줄바꿈되고 줄들보다 높으면 align-content가 줄의 위치를 정해요. justify-content와 같은 값에 stretch를 더해 받아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-content</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; flex-wrap: wrap; gap: 6px; width: 200px; height: 160px; background: #e5e7eb; }
    .box div { width: 60px; height: 30px; background: #f59e0b; }
    .row { display: flex; gap: 16px; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>align-content: flex-start</code><div class="box" style="align-content: flex-start"><div></div><div></div><div></div><div></div><div></div></div></div>
    <div><code>align-content: space-between</code><div class="box" style="align-content: space-between"><div></div><div></div><div></div><div></div><div></div></div></div>
  </div>
</body>
</html>

첫 번째 상자에서는 두 줄 모두 위에 붙어 있어요. 두 번째 상자에서는 첫 줄이 위에, 둘째 줄이 아래에 있고 남는 높이가 모두 그 사이에 있어요.

뒤집힌 순서와 접근성

row-reverse, column-reverse, wrap-reverse는 항목이 그려지는 위치만 바꿔요. 스크린 리더와 Tab 키는 여전히 HTML 순서를 따라서, 키보드 사용자는 보이는 것과 반대 방향으로 항목을 이동하게 돼요. 뒤집기는 시각 효과로만 쓰고, 순서에 의미가 있다면 HTML에서 바꾸세요.

자주 하는 실수

줄바꿈되지 않고 줄어드는 항목. flex: 1 항목은 flex-basis 0에서 시작해서 한 줄에 욱여넣어져요. flex: 1 1 200px처럼 실제 basis를 주세요.
항목에 flex-wrap 주기. flex 컨테이너에 줘야 해요.
줄바꿈된 줄 간격에 align-items 쓰기. 그건 각 줄 안의 항목을 정렬해요. 줄 자체는 align-content로 움직여요.
행 전체로 늘어난 외로운 마지막 항목. 항목이 하나뿐인 줄에서 flex-grow가 동작한 거예요. 모든 카드가 같은 너비여야 한다면 grid를 쓰세요.
flex-direction: column이 높이를 채울 거라고 기대하기. 열 컨테이너는 height를 주지 않으면 콘텐츠만큼만 높아서 justify-content가 동작할 공간이 없어요.

자주 묻는 질문

flex-wrap: wrap은 무엇을 하나요?

flex 항목이 한 행에 들어가지 않을 때 새 줄로 넘어가게 해요. 기본값 nowrap에서는 항목이 한 줄에 머물면서 줄어들고, 더 줄어들 수 없으면 컨테이너를 넘쳐요.

flex-wrap이 동작하지 않는 이유는 무엇인가요?

줄바꿈은 항목들의 시작 크기 합이 컨테이너보다 클 때만 일어나요. flex: 1 항목은 flex-basis 0에서 시작해서 절대 줄바꿈되지 않으니, 실제 시작 크기(flex: 1 1 200px나 width: 200px)를 주세요. flex-wrap이 항목이 아니라 flex 컨테이너에 있는지도 확인하세요.

flex-direction row와 column은 무엇이 다른가요?

row(기본값)는 항목을 글쓰기 방향으로 나란히 놓고, column은 위에서 아래로 쌓아요. 주축도 함께 돌아서 열에서는 justify-content가 세로로, align-items가 가로로 동작해요.

flex-flow는 무엇인가요?

flex-direction과 flex-wrap을 선언 하나로 쓰는 단축 속성이에요. flex-flow: row wrap;은 flex-direction: row; flex-wrap: wrap;과 같아요.

align-items와 align-content는 무엇이 다른가요?

align-items는 줄 안에서 항목을 배치해요. align-content는 컨테이너 안에서 줄 자체를 배치해서, 컨테이너에 flex-wrap: wrap이 있고 줄들보다 높을 때만 의미가 있어요.