CSS Academy · 강의

Flex Wrap과 Align-Content

flex 항목을 여러 줄로 줄바꿈하고 align-content로 줄을 정렬합니다.

Flex Wrap과 Align-Content은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

flex-wrap: nowrap (기본값)

기본적으로 플렉스 항목은 줄 바꿈되지 않습니다. 항목이 컨테이너 너비를 초과하면 새 줄로 넘어가는 대신 항목 크기가 줄어들거나 넘칩니다.

flex-wrap: wrap

flex-wrap: wrap을 사용하면 주축에서 넘치는 항목이 새 줄로 줄 바꿈됩니다. 열 방향에서는 새 열로 줄 바꿈됩니다. 각 줄 바꿈 행은 별도의 작은 플렉스 컨테이너처럼 작동합니다.

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

wrap-reverse는 교차축의 반대 방향으로 항목을 줄 바꿈합니다. 행 방향에서는 새 줄이 아래가 아니라 위에 나타납니다.

카드 줄 바꿈 패턴

뷰포트가 좁아지면 카드가 다음 행으로 줄 바꿈되는 대표적인 반응형 카드 레이아웃입니다:

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

여러 줄을 위한 align-content

align-content는 교차축에서 줄 바꿈된 줄 사이의 간격을 제어합니다. 줄이 하나뿐일 때는 효과가 없습니다. 사용할 수 있는 값은 justify-content와 유사합니다.

align-content 값

사용할 수 있는 값은 다음과 같습니다:

flex-start — 줄을 교차축의 시작점 쪽으로 모읍니다
flex-end — 줄을 교차축의 끝점 쪽으로 모읍니다
center — 줄을 가운데 정렬합니다
space-between — 줄 사이에 동일한 간격을 둡니다
space-around — 줄 주변에 동일한 간격을 둡니다
stretch — 줄이 공간을 채우도록 늘어납니다(기본값)

<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

align-items와 align-content 비교

차이점은 다음과 같습니다:

align-items — 각 플렉스 줄 안에서 항목을 정렬합니다
align-content — 컨테이너 안에서 플렉스 줄 자체를 정렬합니다

Flexbox의 간격

gap 속성(이전에는 grid-gap)은 여백을 사용하지 않고 플렉스 항목 사이에 일정한 간격을 추가합니다. 행 사이의 간격과 열 사이의 간격 모두에 사용할 수 있습니다.

<div class="flex-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

미디어 쿼리 없이 반응형 줄 바꿈

고정된 이상적인 크기를 사용하여 들어갈 수 있는 만큼 열을 자동으로 배치합니다. 미디어 쿼리가 필요하지 않습니다:

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

flex-flow 단축 속성

flex-flow는 하나의 선언에서 flex-direction과 flex-wrap을 결합합니다:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

줄 바꿈과 Grid 비교

행과 열이 정의된 복잡한 2차원 레이아웃에는 CSS 그리드가 더 적합합니다. Flexbox 줄 바꿈은 여러 줄로 흐를 수 있는 1차원 콘텐츠에 가장 적합합니다.

빠른 확인

플렉스 컨테이너에 여러 행이 있을 때 줄 바꿈된 줄 자체를 정렬하는 속성은 무엇입니까?

정리

flex-wrap: wrap을 사용하면 항목이 새 줄로 이동할 수 있습니다. align-content는 여러 줄로 구성된 컨테이너에서 이러한 줄 사이의 간격을 제어합니다. 일정한 간격을 두려면 gap을 사용합니다. 미디어 쿼리 없이 반응형 카드 그리드를 만들려면 flex: 1 1 250px과 flex-wrap을 함께 사용합니다.

자주 묻는 질문

“Flex Wrap과 Align-Content” 강의는 무료인가요?

네 — “Flex Wrap과 Align-Content” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Flex Wrap과 Align-Content”에서 뭘 배우나요?

flex 항목을 여러 줄로 줄바꿈하고 align-content로 줄을 정렬합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“Flex Wrap과 Align-Content” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기