CSS Flexbox 생성기

flex-direction・justify-content・align-items・flex-wrap・gap을 GUI로 조작하며 실시간 미리보기로 Flexbox 레이아웃을 실험할 수 있는 무료 도구. 생성된 CSS 코드는 클릭 한 번으로 복사할 수 있다.

마지막 업데이트: 2026-09-20

손으로 만지며 Flexbox 배치를 짜기

Flexbox는 요소를 한 줄기 축을 따라 늘어놓는 배치 방식입니다. 이 도구는 `flex-direction`·`justify-content`·`align-items`·`flex-wrap`·`gap`을 화면에서 바꿔 가며 그 자리에서 결과를 보고, 완성된 CSS를 그대로 복사해 갈 수 있게 해 줍니다.

**Flexbox에서 걸려 넘어지는 일은 거의가 「`justify-content`와 `align-items`가 각각 어느 쪽으로 듣는가」에 달려 있습니다.** 앞의 것은 **주축**을 따른 배치를, 뒤의 것은 **교차축**을 따른 배치를 다스립니다. 성가신 점은 **`flex-direction`을 `row`에서 `column`으로 바꾸는 순간 이 두 축이 맞바뀐다**는 것입니다. 나란히 놓였을 때 가로를 맡던 `justify-content`가, 세로로 쌓으면 세로를 맡게 됩니다. 「아무리 해도 가운데로 오지 않는다」는 하소연의 대부분은 **바꿔야 할 속성이 맞바뀐 것을 알아채지 못한 데 지나지 않습니다.**

사용하는 방법

프리셋에서 시작합니다 가운데 모음, 양 끝 정렬, 세로 쌓기 같은 흔한 꼴이 마련되어 있습니다.
flex-direction을 바꿉니다 **`row`와 `column`을 오가면 축이 맞바뀌는 것이 눈에 들어옵니다.**
정렬 속성을 시험합니다 `justify-content`와 `align-items`를 차례로 바꿔 각각 어떻게 듣는지 확인합니다.
만들어진 CSS를 복사합니다 마음에 드는 꼴이 되면 그대로 코드에 붙여 넣을 수 있습니다.

더 잘 활용하기 위한 팁

justify-content는 「주축」 방향의 정렬을, align-items는 「교차축」 방향의 정렬을 담당합니다. flex-direction을 column으로 바꾸면 주축이 세로 방향이 되어 이 두 속성의 시각적 효과가 서로 바뀝니다.
「가운데 정렬」 프리셋은 justify-content: center와 align-items: center를 조합한 것으로, Flexbox로 요소를 상하좌우 가운데에 배치하는 가장 대표적인 방법입니다.
gap 속성은 아이템 사이의 간격에만 적용되며 컨테이너 바깥쪽 여백(margin)에는 영향을 주지 않습니다. margin과 달리 인접한 아이템 사이에만 균등한 간격을 만들 수 있는 것이 장점입니다.
특정 아이템 하나에 align-self를 지정하면 컨테이너 전체의 align-items 설정을 무시하고 그 아이템만 다르게 정렬할 수 있습니다. 하나만 눈에 띄게 하고 싶을 때 유용합니다.
flex-wrap: wrap을 활성화하면 컨테이너의 너비(column 모드에서는 높이)에 들어가지 않는 아이템이 자동으로 다음 줄로 넘어갑니다. 반응형 카드 레이아웃에서 자주 쓰이는 기법입니다.

이럴 때 쓸 수 있습니다

내비게이션 바를 짤 때

**로고는 왼쪽, 메뉴는 오른쪽에 두는 꼴이 `justify-content: space-between`의 본보기입니다.**

카드를 고르게 늘어놓을 때

`gap`을 쓰면 간격을 맞추려고 `margin`을 되돌리는 잔재주가 필요 없어집니다.

요소를 상하좌우 가운데에 둘 때

**`justify-content`와 `align-items`를 모두 `center`로 두는 것이 가장 빠른 길입니다.**

Flexbox를 익힐 때

값을 바꾸며 결과를 보는 편이 설명을 읽는 것보다 훨씬 빠릅니다.

Flexbox 용어

주축: 요소가 늘어서는 방향으로, `flex-direction`이 정합니다. **`row`면 가로, `column`이면 세로가 됩니다.**
교차축: 주축과 직각을 이루는 방향입니다. **주축이 맞바뀌면 이쪽도 함께 맞바뀝니다.**
justify-content: **주축을 따른** 배치를 다스립니다. 가운데 모음, 양 끝 정렬, 고른 나눔 등을 지정합니다.
align-items: **교차축을 따른** 배치를 다스립니다. 기본값인 `stretch`에서는 자식이 높이를 가득 채웁니다.
flex-wrap: 들어가지 않는 요소를 줄 바꿈할지를 정합니다. `nowrap`인 채로 두면 눌려서 밀어 넣어집니다.
gap: 요소 사이에 두는 여백입니다. **`margin`과 달리 바깥 가장자리에 군더더기 여백이 붙지 않습니다.**

자주 묻는 질문

justify-content는 Flexbox의 「주축」 방향(flex-direction으로 정해지는 방향, 기본값은 가로)을 따라 정렬을 제어하고, align-items는 주축과 수직인 「교차축」 방향의 정렬을 제어합니다. flex-direction: row일 때는 주축이 가로이므로 justify-content가 가로 배치를, align-items가 세로 배치를 담당하지만, flex-direction: column으로 바꾸면 주축이 세로로 바뀌면서 두 속성의 역할이 서로 바뀝니다.

flex-direction이 column이면 주축이 세로 방향이 되므로 justify-content: center로 세로 방향 가운데 정렬을 할 수 있습니다. 가로 방향(교차축)도 가운데 정렬하려면 align-items: center를 사용하세요. 두 속성을 함께 사용하면 세로로 쌓인 레이아웃에서도 상하좌우 모두 가운데 정렬할 수 있습니다.

Flexbox의 gap 속성은 2021년 무렵까지 Chrome과 Safari의 지원이 늦었지만, 현재는 주요 브라우저(Chrome 84 이상・Safari 14.1 이상・Firefox 63 이상) 모두에서 지원됩니다. 아주 오래된 브라우저까지 지원해야 한다면 margin을 대안으로 고려하세요.

flex-grow는 컨테이너에 여유 공간이 있을 때 아이템이 얼마나 늘어나 그 공간을 채울지를 지정하는 값이고, flex-shrink는 컨테이너가 좁아 아이템이 원래 크기대로 다 들어가지 않을 때 얼마나 줄어들지를 지정하는 값입니다. 두 속성 모두 아이템의 기본 크기(flex-basis)를 기준으로 남거나 부족한 공간을 어떻게 배분할지를 결정합니다.

일반적으로 Flexbox는 내비게이션 바나 카드 나열처럼 「한 방향(행 또는 열)으로 나열되는 요소 그룹」의 레이아웃에 적합합니다. 반면 CSS Grid는 페이지 전체의 격자 레이아웃처럼 행과 열을 동시에 제어하는 2차원 레이아웃에 적합합니다. 단순한 나열이라면 Flexbox, 복잡한 격자 형태 배치가 필요하다면 Grid를 선택하는 것이 기준이 됩니다.

여담 ― Flexbox가 바꾼 CSS 레이아웃의 역사

CSS Flexbox(정식 명칭: CSS Flexible Box Layout Module)가 등장하기 전, 웹 페이지의 가로 배치 레이아웃은 float 속성을 사용해 구현하는 것이 일반적이었습니다. 하지만 float는 본래 「이미지 주위로 텍스트를 흘려보내기」위한 기능이었기 때문에, 레이아웃 목적으로 사용하려면 요소의 높이가 맞지 않거나 부모 요소의 높이가 무너지는(클리어런스 문제) 등 여러 우회책(clearfix 해킹 등)이 필요했습니다.

2009년 W3C에서 첫 초안이 공개된 Flexbox는 「1차원 배치」에 특화된 레이아웃 모델로 설계되었습니다. 요소를 주축 방향으로 늘리거나, 여백을 균등하게 배분하거나, 세로 방향 가운데 정렬을 한 줄로 구현하는 등 float로는 여러 줄의 CSS 해킹이 필요했던 처리가 justify-content・align-items 같은 선언적 속성만으로 끝나게 되었습니다.

2015년 무렵 주요 브라우저에서 구현이 완료되자 Flexbox는 내비게이션 바・카드 레이아웃・폼 정렬 등 웹 디자인의 대표적인 패턴을 구현하는 표준 수단으로 빠르게 확산되었습니다. 「Flexbox로 세로 방향 가운데 정렬이 가능해졌다」는 것은 당시 프런트엔드 개발자 커뮤니티에서 특히 환영받은 변화 중 하나로 알려져 있습니다.

오늘날에는 Flexbox와 2차원 레이아웃에 특화된 CSS Grid가 역할을 분담하며 공존하고 있으며, Flexbox는 「한 방향으로 나열되는 컴포넌트 내부의 레이아웃」, Grid는 「페이지 전체의 격자형 레이아웃」이라는 형태로 조합해 사용하는 경우가 많아지고 있습니다.

모든 여담 보기