flex-wrap은 어떤 역할을 하나요?

flex-wrap은 공간이 부족할 때 flex 아이템들이 한 줄에 머물지 아니면 여러 줄로 줄바꿈할지를 제어합니다. 기본값인 nowrap은 아이템을 한 줄에 강제로 배치하며 크기를 줄일 수 있습니다. wrap은 아이템이 다음 줄로 넘어가도록 허용하며, wrap-reverse는 역순으로 줄바꿈합니다.

CSS Flexbox 플레이그라운드

Q: justify-content와 align-items의 차이점은 무엇인가요?

justify-content는 주축(기본적으로 가로)을 따라 정렬을 제어하는 반면, align-items는 교차축(기본적으로 세로)을 따라 정렬을 제어합니다. flex-direction을 column으로 변경하면 축이 바뀝니다. 즉, justify-content는 세로 방향이 되고 align-items는 가로 방향이 됩니다.

Q: Flexbox로 요소를 어떻게 중앙에 배치하나요?

Flexbox를 사용하여 단일 요소를 가로 및 세로로 모두 중앙에 배치하려면 부모 컨테이너를 display: flex로 설정한 다음 justify-content: center와 align-items: center를 추가하세요. 이것은 margin: auto, transform 또는 absolute positioning을 사용하는 오래된 중앙 정렬 방식의 현대적인 대체 방법입니다.

Q: flex-grow, flex-shrink, flex-basis의 차이점은 무엇인가요?

flex-basis는 여유 공간이 분배되기 전 아이템의 초기 크기를 설정합니다. flex-grow는 다른 아이템에 비해 얼마나 많은 여유 공간을 더 차지할지 정의합니다(0은 늘어나지 않음을 의미). flex-shrink는 공간이 부족할 때 아이템이 얼마나 줄어들지 정의합니다(0은 줄어들지 않음을 의미). 단축 속성인 flex: 1 1 auto는 이 세 가지를 한 번에 설정합니다.

Q: 언제 Flexbox를 쓰고 언제 Grid를 써야 하나요?

아이템이 단일 방향(버튼 행, 내비게이션 바, 한 줄의 카드 리스트)으로 흐르는 1차원 레이아웃에는 Flexbox를 사용하세요. 행과 열을 동시에 제어해야 하는 2차원 레이아웃(전체 페이지 레이아웃, 이미지 갤러리, 대시보드)에는 CSS Grid를 사용하세요. 두 기술은 서로 경쟁하는 것이 아니라 보완적이며, 많은 실제 디자인에서 이를 함께 사용합니다.

실시간 시각적 미리보기, 항목별 제어, 실제 레이아웃 프리셋(Holy Grail, 카드 그리드, 내비게이션 바, 모달) 및 원클릭 CSS 내보내기를 지원하는 대화형 CSS Flexbox 플레이그라운드입니다. 실시간 실험을 통해 flex-direction, justify-content, align-items, gap 등을 배워보세요.

CSS Flexbox 플레이그라운드

⚡ 빠른 시작 레이아웃 (클릭하여 불러오기)

▦ 라이브 미리보기

→ 주축 (main axis) ↓ 교차축 (cross axis) 0개 아이템 팁: 편집하려면 아이템을 클릭하세요

⚙ 컨테이너 (.flex-container)

flex-direction ?

flex-wrap ?

justify-content ?

align-items ?

align-content ?

gap 8px

8px

✦ 선택된 아이템 (.flex-item)

미리보기에서 아이템을 클릭하여 속성을 편집하세요.

📖 요약 치트시트 — 자주 쓰는 패턴

▼

원하는 것…	사용할 방법
아이템 하나를 완벽하게 중앙 정렬	`justify-content: center; align-items: center`
균등한 너비의 컬럼들	각 아이템에 `flex: 1` 적용
아이템 하나를 오른쪽 끝으로 밀기	해당 아이템에 `margin-left: auto` 적용
작은 화면에서 카드 줄바꿈하기	`flex-wrap: wrap` + `flex: 1 1 240px`
모바일에서 순서 뒤집기	미디어 쿼리에서 `flex-direction: row-reverse` 적용
뷰포트 하단에 푸터 고정(sticky)	body: `display: flex; flex-direction: column; min-height: 100vh`
아이템 사이에 균등한 공간 두기	`justify-content: space-between`
아이템이 줄어들지 않게 하기	아이템에 `flex-shrink: 0` 적용

생성된 CSS

생성된 HTML

Embed CSS Flexbox 플레이그라운드 Widget

CSS Flexbox 플레이그라운드 정보

CSS Flexbox 플레이그라운드는 현대적인 CSS Flexible Box Layout 모듈을 위한 대화형 학습 환경이자 코드 생성기입니다. 컨테이너 속성(flex-direction, justify-content, align-items, gap)과 아이템별 속성(flex-grow, flex-shrink, flex-basis, align-self, order)을 조정하고 레이아웃이 실시간으로 업데이트되는 것을 확인해 보세요. 마음에 드는 구성을 만들었다면 프로젝트에 바로 붙여넣을 수 있는 CSS와 HTML 코드를 복사하세요.

CSS Flexbox란 무엇인가요?

CSS Flexbox(Flexible Box Layout)는 단일 축(행 또는 열)을 따라 공간을 분배하고 컨테이너 내의 아이템을 정렬하도록 설계된 1차원 레이아웃 모델입니다. 내비게이션 바, 카드 행, 중앙 정렬 콘텐츠 및 요소가 컨테이너에 맞춰 자연스럽게 유연해져야 하는 모든 UI에서 float나 inline-block 핵과 같은 오래된 기술을 대체합니다. 2차원인 CSS Grid와 달리 Flexbox는 한 번에 한 방향으로만 정렬을 제어하는 단순한 배치에 탁월합니다.

이 플레이그라운드 사용 방법

프리셋 선택 (선택 사항): Holy Grail, Card Grid, Navbar, Hero, Modal 또는 Sticky Footer를 선택하여 실제 활용 사례를 불러오세요. 각 프리셋은 연구하거나 수정할 수 있는 완전한 작동 레이아웃입니다.
컨테이너 속성 조정: 오른쪽 패널의 세그먼트 제어기를 사용하여 flex-direction, flex-wrap, justify-content, align-items, align-content 및 gap을 설정하세요. 시각적 스테이지가 즉시 업데이트됩니다.
개별 아이템 편집: 미리보기에서 아무 아이템이나 클릭하여 선택하세요. 해당 아이템의 order, flex-grow, flex-shrink, flex-basis 및 align-self를 다른 아이템과 독립적으로 덮어쓸 수 있습니다. 속성이 변경된 아이템은 작은 배지로 표시됩니다.
아이템 추가 또는 제거: 아이템 추가 및 선택 항목 제거를 사용하여 아이템 개수를 변경하고 레이아웃이 어떻게 반응하는지 확인하세요.
코드 복사: 하단의 생성된 코드 섹션에는 항상 현재 레이아웃이 반영됩니다. 클릭 한 번으로 CSS, HTML 또는 둘 다를 복사하세요.

컨테이너 속성 참조

flex 컨테이너는 display: flex가 적용된 부모 요소입니다. 이 속성들은 모든 자식 요소들이 함께 작동하는 방식을 제어합니다.

속성	값	효과
`flex-direction`	`row` · `row-reverse` · `column` · `column-reverse`	주축 방향을 설정합니다. `row`는 아이템을 왼쪽에서 오른쪽으로 배치하며(기본값), `column`은 수직으로 쌓습니다.
`flex-wrap`	`nowrap` · `wrap` · `wrap-reverse`	공간이 부족할 때 아이템이 한 줄에 유지될지 아니면 여러 줄로 넘어갈지를 제어합니다.
`justify-content`	`flex-start` · `center` · `flex-end` · `space-between` · `space-around` · `space-evenly`	주축을 따라 아이템을 정렬합니다. 여유 공간을 양옆이나 아이템 사이에 분배합니다.
`align-items`	`stretch` · `flex-start` · `center` · `flex-end` · `baseline`	교차축(주축에 수직인 축)을 따라 아이템을 정렬합니다.
`align-content`	`stretch` · `flex-start` · `center` · `flex-end` · `space-between` · `space-around`	교차축을 따라 줄바꿈된 줄들을 정렬합니다. 아이템이 여러 줄로 넘어갔을 때만 효과가 나타납니다.
`gap`	길이 값 (예: `8px`, `1rem`)	flex 아이템 사이의 간격을 설정합니다. 오래된 `margin` 기반 간격 방식을 대체합니다.

아이템 속성 참조

이 속성들은 개별 flex 아이템(컨테이너의 자식)에 적용되며 해당 아이템에 대해서만 컨테이너의 기본 설정을 덮어씁니다.

속성	값	효과
`order`	정수 (기본값 `0`)	HTML 구조를 바꾸지 않고 시각적으로 아이템 순서를 변경합니다. 낮은 숫자가 먼저 렌더링되며 음수 값은 아이템을 앞으로 보냅니다.
`flex-grow`	숫자 (기본값 `0`)	형제 아이템들에 비해 이 아이템이 컨테이너의 여유 공간을 얼마나 차지할지 정의합니다. 모든 아이템에 `1`을 주면 공간을 균등하게 나눕니다.
`flex-shrink`	숫자 (기본값 `1`)	공간이 부족할 때 아이템이 얼마나 줄어들 수 있는지 정의합니다. `0`은 절대 줄어들지 않음을 의미하며 선언된 크기를 유지합니다.
`flex-basis`	`auto` · 길이 값 · 백분율	여유 공간이 분배되기 전 아이템의 초기 크기를 설정합니다. 실질적으로 아이템의 "이상적인" 주축 크기를 설정합니다.
`align-self`	`auto` · `align-items`와 동일한 값	단일 아이템에 대해 컨테이너의 `align-items` 설정을 덮어씁니다.

justify-content와 align-items의 차이점은 무엇인가요?

justify-content는 주축(main axis)을 따라 정렬을 제어하고, align-items는 교차축(cross axis)을 따라 정렬을 제어합니다. 주축은 flex-direction에 의해 결정됩니다. row일 때는 가로, column일 때는 세로입니다. flex-direction을 row에서 column으로 바꾸면 두 축이 서로 바뀌므로 justify-content는 세로 방향이 되고 align-items는 가로 방향이 됩니다. 이 축 변경은 Flexbox를 배울 때 가장 혼란스러운 부분 중 하나입니다. 미리보기 하단의 축 표시기를 통해 이를 시각적으로 확인할 수 있습니다.

Flexbox로 요소를 어떻게 중앙에 배치하나요?

단일 요소를 가로 및 세로 양방향으로 중앙 정렬하려면:

코드 세 줄:
display: flex;
justify-content: center; /* 가로 중앙 */
align-items: center; /* 세로 중앙 */

이것은 margin: auto, transform: translate(-50%, -50%) 또는 position: absolute를 사용하는 과거의 정렬 방식을 대체하는 현대적인 방법입니다. 플레이그라운드에서 Modal Center 프리셋을 선택하여 직접 확인해 보세요.

실제 레이아웃 프리셋 설명

Holy Grail 레이아웃

헤더와 푸터가 있고 왼쪽 사이드바, 메인 콘텐츠, 오른쪽 사이드바가 있는 고전적인 3단 페이지 레이아웃입니다. 과거에는 float로 구현하기 매우 까다로웠으나 Flexbox를 쓰면 매우 간단해집니다. 중간 컬럼에 flex: 1을 주어 사이드바가 고정된 너비를 유지하는 동안 남은 가로 공간을 모두 차지하게 만듭니다.

Card Grid

뷰포트가 좁아짐에 따라 다음 줄로 넘어가는 카드 행 레이아웃입니다. flex-wrap: wrap을 사용하고 각 카드에 flex: 1 1 240px을 부여합니다. 이는 카드가 늘어나거나 줄어들 수 있지만 240px보다 좁아지지는 않음을 의미합니다.

Navbar

왼쪽에 로고가 있고 오른쪽에 링크들이 있는 가로형 내비게이션 바입니다. 로고와 링크 그룹을 두 자식 요소로 두고 justify-content: space-between을 적용하는 것이 핵심이며, 링크들 자체를 위해 내부적으로 또 다른 flex 컨테이너를 사용합니다.

Hero 섹션

콘텐츠가 가로 및 세로 모두 중앙에 정렬된 수직 스택 레이아웃으로, 랜딩 페이지의 히어로 영역에 적합합니다. 높은 컨테이너에 flex-direction: column, justify-content: center, align-items: center를 사용합니다.

Modal Center

오버레이 내에서 완벽하게 중앙에 배치된 모달 대화 상자입니다. 위에서 설명한 세 줄 중앙 정렬 레시피를 전체 화면 오버레이 컨테이너에 적용한 방식입니다.

Sticky Footer

콘텐츠가 짧을 때는 뷰포트 하단에 머물고, 콘텐츠가 길어지면 아래로 밀려나는 푸터입니다. body에 display: flex; flex-direction: column; min-height: 100vh를 주고 메인 콘텐츠 요소에 flex: 1을 주어 구현합니다.

flex-grow, flex-shrink, flex-basis의 차이점은 무엇인가요?

이 세 가지 속성(단축 속성 flex로 결합됨)은 아이템이 공간을 처리하는 방식을 설명합니다.

flex-basis는 여유 공간이 분배되기 전 아이템의 이상적인 크기를 설정합니다. 아이템의 "시작 지점"이라고 생각하면 됩니다.
flex-grow는 "남는 공간이 있다면 이 비율만큼 가져가라"는 뜻입니다. 0은 늘어나지 않음을, 1은 비례하여 늘어남을, 2는 1인 아이템보다 두 배 더 가져감을 의미합니다.
flex-shrink는 "공간이 부족하다면 이 비율만큼 줄어들어라"는 뜻입니다. 기본값은 1(비례하여 줄어듦)이며, 0은 절대 줄어들지 않음을 뜻합니다.

단축 속성 flex: 1은 flex: 1 1 0%로 확장됩니다. 즉, 똑같이 늘어나고 똑같이 줄어들며 기준 크기가 0이 되어, 콘텐츠에 관계없이 모든 아이템이 컨테이너 공간을 균등하게 나누어 가집니다. flex: auto는 flex: 1 1 auto로 확장되어 콘텐츠 크기를 기준(basis)으로 존중합니다.

언제 Flexbox를 쓰고 언제 Grid를 써야 하나요?

버튼 행, 내비게이션 바, 단일 컬럼 카드와 같이 아이템이 한 방향으로 흐르는 1차원 레이아웃에는 Flexbox를 사용하세요. Flexbox는 콘텐츠의 크기에 민감하며 아이템이 스스로 크기를 정하게 하고 싶을 때 훌륭합니다.

전체 페이지 레이아웃, 이미지 갤러리, 대시보드와 같이 행과 열을 동시에 제어해야 하는 2차원 레이아웃에는 CSS Grid를 사용하세요. Grid는 레이아웃 구조를 먼저 정의하고 아이템을 정해진 트랙에 배치하는 방식에 유리합니다.

두 기술은 서로 경쟁하는 것이 아니라 보완적입니다. 많은 실제 디자인에서 Grid로 페이지 전체 틀을 잡고 그 안의 내비게이션 바나 카드 행은 Flexbox로 구현하는 식으로 결합하여 사용합니다.

Flexbox 마스터를 위한 팁

축을 시각화하세요. 항상 어느 방향이 "주축"이고 어느 방향이 "교차축"인지 파악해야 합니다. 이 플레이그라운드의 축 표시기가 이를 명시적으로 도와줍니다.
margin 대신 gap을 사용하세요. 현대적인 브라우저는 flex 컨테이너의 gap을 완벽하게 지원하며, 이는 마지막 자식 요소에 어색한 margin을 제거해야 하는 번거로움을 없애줍니다.
flex: 1을 적극 활용하세요. 아이템들이 공간을 균등하게 공유하길 원할 때 이 단축 속성은 거의 항상 정답입니다.
flex 아이템에 min-width: 0 적용. 아이템은 콘텐츠에 기반한 암시적 최소 너비를 가집니다. URL처럼 줄바꿈되지 않는 긴 문자열로 인해 레이아웃이 깨진다면 해당 아이템에 min-width: 0을 설정하여 이를 해결하세요.
백분율 너비만 사용하는 것을 피하세요. 백분율 너비와 flex-grow를 섞어서 쓰면 예상치 못한 결과가 나올 수 있습니다. 합리적인 기본값과 함께 flex-basis를 사용하는 것을 권장합니다.

브라우저 지원 및 호환성

CSS Flexbox는 Chrome, Firefox, Safari, Edge 및 모든 주요 모바일 브라우저를 포함한 모든 현대적인 브라우저에서 지원됩니다. flex 컨테이너의 gap 속성은 2021년에 범용적인 브라우저 지원을 달성했습니다. 이전 세대의 브라우저(IE10/11)는 벤더 프리픽스가 필요하며 몇 가지 잘 알려진 버그가 있습니다. 해당 환경을 고려해야 한다면 flexbugs 리포지토리를 참고하세요.

자주 묻는 질문

왜 flex 아이템이 컨테이너 밖으로 넘치나요?

flex 아이템은 콘텐츠에 기반한 암시적인 min-width: auto를 가집니다. 긴 단어, 코드 블록 또는 서식이 지정된 텍스트는 아이템을 컨테이너보다 넓게 만들 수 있습니다. 아이템에 min-width: 0을 설정하여 해결하세요(수직 레이아웃의 경우 min-height: 0).

space-between, space-around, space-evenly의 차이점은 무엇인가요?

space-between은 양 끝에 공간을 두지 않고 아이템 사이에만 균등한 공간을 둡니다. space-around는 양 끝에 간격의 절반을 두고 아이템 사이에는 전체 간격을 둡니다. space-evenly는 양 끝과 아이템 사이 모두에 동일한 공간을 둡니다. 플레이그라운드에서 전환하며 차이를 느껴보세요.

flex 속성에 애니메이션을 적용할 수 있나요?

네. flex-grow, flex-shrink, flex-basis, order, gap은 트랜지션(transition)이 가능합니다. flex-direction, justify-content, align-items는 불연속적인 열거형 속성이므로 애니메이션이 지원되지 않습니다.