CSS Flexbox 실험판

남는 공간이 보이는 Flexbox 실험판

CSS Flexbox 실험판의 무대에 놓인 컨테이너는 실제 display: flex 상자입니다. 부모의 방향·줄바꿈·정렬과 간격을 누르면 항목이 그 자리에서 움직이고, 모서리 손잡이로 너비와 높이를 끌면 항목이 언제 다음 줄로 넘어가고 언제 줄어드는지 바로 보입니다. 안내선은 주축과 교차축의 방향을 화살표로, gap을 진한 막대로, 항목이 차지하지 않은 남는 공간을 빗금과 숫자로 표시합니다. 항목이 컨테이너를 뚫고 나가면 넘친 길이를 붉은 빗금으로 보여 줍니다.

항목을 하나 골라 flex: 1·auto·none 같은 값을 바꾸면, 아래의 크기 풀이가 CSS Flexbox 명세의 계산 순서(§9.7)를 그대로 따라 남는 공간을 어떻게 나눴는지 보여 줍니다. 이 계산 결과는 지금 열려 있는 브라우저가 실제로 그린 크기와 1px 안에서 맞춰 봅니다. 배치가 마음에 들면 CSS와 HTML을 복사하고, 링크 복사로 지금 상태를 주소에 담아 둘 수 있습니다.

언제 Flexbox를 쓰나: Grid와 나누는 기준

Flexbox는 항목을 한 방향으로 늘어놓고 그 줄 안에서 공간을 나누는 배치입니다. 여러 줄로 감싸더라도 줄마다 공간을 따로 계산하므로 위아래 줄의 칸 경계가 맞지 않습니다. 행과 열을 함께 맞춰야 하는 표 같은 배치에는 CSS Grid가 더 알맞습니다.

• 메뉴·버튼 묶음: 길이가 제각각인 항목을 한 줄에 두고 gap으로 간격을 맞출 때 씁니다. 한 항목만 끝으로 보내려면 auto 여백을 줍니다(예시 '내비게이션 바').
• 가로·세로 가운데 정렬: 부모 높이 안에서 내용 하나를 정가운데에 놓을 때 씁니다. 위치를 따로 계산하지 않아도 됩니다.
• 입력칸 + 버튼, 사이드바 + 본문: 한쪽은 크기를 고정하고 다른 쪽이 남는 공간을 모두 가져갈 때 씁니다(flex: 0 0 120px와 flex: 1 1 0).
• 아래에 붙는 바닥글: 세로 방향에서 본문에 flex-grow를 주면 내용이 짧아도 바닥글이 아래 끝에 붙습니다.
• 태그·칩 목록: 줄바꿈을 켜고 내용 길이대로 흘려 보낼 때 씁니다. 카드처럼 칸 너비를 모든 줄에서 똑같이 맞춰야 한다면 Grid를 검토합니다. 예시 '늘어나는 카드'에서 마지막 줄의 카드가 넓어지는 이유가 줄마다 따로 나누는 계산 때문입니다.

쓰는 법

1. 출발점을 고릅니다. 예시 배치 12개 가운데 하나를 누르면 부모와 항목 설정, 컨테이너 크기가 한꺼번에 바뀝니다. 넓은 화면에서는 무대가 화면 위에 붙어 따라오므로 예시를 눌러 가며 결과를 바로 비교할 수 있습니다.
2. 부모를 정합니다. 방향과 줄바꿈을 먼저 고르고 주축 정렬과 교차축 정렬을 바꿉니다. 정렬 아이콘은 지금 방향에 맞춰 돌아가므로 아이콘 속 막대가 움직이는 쪽이 실제로 항목이 움직이는 쪽입니다.
3. 크기를 끌어 봅니다. 무대 오른쪽 아래 손잡이로 컨테이너를 좁히면 줄바꿈과 줄어듦이 일어나는 지점을 찾을 수 있습니다. 손잡이에 초점을 두고 화살표 키를 누르면 10px씩, Shift와 함께 누르면 50px씩 바뀌고, Home 키는 너비를 무대에 맞춥니다.
4. 항목을 다듬습니다. 무대의 항목이나 번호 단추로 항목을 고른 뒤 글자, flex 값, 순서, align-self, auto 여백을 바꿉니다. 크기 풀이 카드에서 그 항목이 남는 공간을 얼마나 받았는지 확인합니다.
5. 복사합니다. 'CSS 복사'와 'HTML 복사'로 코드를 가져갑니다. 기본 코드에는 기본값과 다른 배치 속성만 들어갑니다. '미리 보기 꾸밈 포함'을 켜면 무대와 같은 크기·여백·테두리까지 넣어, 붙여 넣은 곳에서 같은 모양으로 다시 그릴 수 있습니다.

주축과 교차축

주축은 항목이 나열되는 방향이고, 교차축은 그에 수직인 방향입니다. justify-content는 주축에서, align-items·align-self·align-content는 교차축에서 항목을 움직입니다. 왼쪽에서 오른쪽으로 가로쓰기 하는 화면에서 네 방향은 다음과 같습니다.

flex-wrap: wrap-reverse는 교차축의 시작과 끝을 맞바꿉니다. 그래서 row에서 wrap-reverse를 고르면 줄이 아래에서 위로 쌓이고, align-items: flex-start도 줄의 아래쪽에 붙습니다. 오른쪽에서 왼쪽으로 쓰는 문서(direction: rtl)나 세로쓰기에서는 시작 쪽이 다시 바뀌므로, flex-start를 늘 '왼쪽'으로 외우면 틀리기 쉽습니다.

justify-content는 남는 공간을 나눕니다

justify-content는 항목의 크기와 간격을 모두 뺀 뒤 주축에 남은 공간을 어디에 둘지 정합니다. 남는 공간이 없으면 값을 바꿔도 아무것도 움직이지 않습니다. 아래 표는 안쪽 너비 400px에 80px 항목 3개를 gap 없이 놓아 남는 공간이 160px일 때의 결과입니다.

space-around는 항목마다 양옆에 같은 여백을 주므로 항목 사이(53.33px)가 양 끝(26.67px)의 두 배가 됩니다. space-evenly는 양 끝과 항목 사이를 모두 같게 둡니다. 이 세 가지 분배 값은 공간을 나눌 수 없을 때 대체 정렬로 바뀝니다. CSS Box Alignment는 space-between의 대체 정렬을 safe flex-start로, space-around와 space-evenly의 대체 정렬을 safe center로 정합니다. 그래서 항목이 하나뿐이면 space-between은 시작 쪽에, 나머지 둘은 가운데에 놓입니다. 항목이 넘칠 때는 safe가 시작 쪽을 지키므로 셋 모두 시작 쪽에 붙습니다(Chromium 151에서 확인).

align-items·align-self·align-content

align-items는 한 줄 안에서 각 항목을 교차축 어디에 둘지 정하고, align-self는 그 값을 항목 하나만 바꿉니다. 기본값 stretch는 교차축 크기가 auto인 항목을 줄의 크기만큼 늘립니다. 가로 배치에서 항목에 height를 직접 주면 늘어나지 않습니다. baseline은 글자 크기가 다른 항목들의 첫 줄 글자 기준선을 맞춥니다(예시 '글자 기준선 맞춤').

align-content는 여러 줄을 한 묶음으로 보고 줄 전체를 교차축에 배치합니다. 기본값 normal은 flex 컨테이너에서 stretch처럼 동작해 줄을 늘려 남는 공간을 채웁니다. 명세는 이 속성이 한 줄(single-line) flex 컨테이너에는 효과가 없다고 적고 있어, flex-wrap: nowrap이면 어떤 값을 골라도 그대로입니다. 반대로 wrap이면 실제 줄이 하나뿐이어도 적용됩니다. Chromium 151에서 높이 100px 컨테이너에 20px 항목 한 줄을 두고 align-content: center를 주면, nowrap에서는 위에 붙은 채 그대로였고 wrap에서는 40px 내려와 가운데에 놓였습니다.

flex 단축 속성: initial·auto·none·1

flex는 flex-grow, flex-shrink, flex-basis를 한 번에 적는 속성입니다. 명세가 자주 쓰는 값으로 소개하는 네 가지는 아래와 같고, flex: 1처럼 숫자 하나만 적으면 flex-basis가 0이 됩니다. 오른쪽 두 칸은 내용 너비가 100px·300px인 항목 두 개를 안쪽 너비 600px과 300px 컨테이너에 넣은 결과입니다.

flex: auto와 flex: 1의 차이는 출발점에 있습니다. auto는 내용 크기(100·300)에 남는 공간 200을 반씩 더하므로 긴 항목이 계속 넓고, 1은 0에서 출발해 600을 반씩 나누므로 두 항목의 너비가 같아집니다. 표는 안쪽 여백과 테두리가 없고 내용의 최소 폭이 충분히 작은 항목으로 계산했습니다. 긴 낱말이 있어 최소 폭이 나눠 받는 몫보다 크면 그 항목은 최소 폭에서 멈추고, 나머지 항목이 남은 공간을 다시 나눕니다.

flex-grow는 남는 공간을 나누는 비율입니다

flex-grow는 최종 크기의 비율이 아니라 남는 공간을 나누는 비율입니다. 아래는 안쪽 너비 500px에 항목 두 개를 둔 결과입니다.

grow 1 : 2는 남는 300px을 100과 200으로 나눌 뿐이라 최종 너비는 200 : 300입니다. 최종 너비가 정확히 1 : 2가 되려면 마지막 줄처럼 기본 크기를 0으로 두고(flex: 1과 flex: 2), 안쪽 여백과 테두리가 없으며 내용의 최소 폭이 걸리지 않아야 합니다. 이 도구의 무대 항목처럼 안쪽 여백과 테두리가 30px씩 있으면 그 30px에서 출발하므로, flex: 1과 flex: 2도 정확히 1 : 2가 되지 않습니다. 늘어나는 항목들의 grow 합이 1보다 작으면 명세는 남는 공간에 그 합을 곱한 만큼만 나눕니다. 0.25 + 0.25 = 0.5이므로 300px의 절반인 150px만 나눠 갖고, 나머지 150px은 justify-content가 배치합니다.

flex-shrink는 기본 크기에 비례해 줄입니다

공간이 모자라면 줄이는 몫은 shrink 값에 안쪽 기본 크기를 곱한 비율로 나눕니다. 안쪽 기본 크기는 기본 크기에서 안쪽 여백과 테두리를 뺀 값입니다. 그래서 큰 항목이 더 많이 줄어들고, shrink 값이 같아도 줄어드는 길이는 다릅니다. 아래는 안쪽 너비 300px에서 100px이 모자란 경우입니다.

마지막 줄은 box-sizing: border-box에 좌우 안쪽 여백과 테두리가 합쳐 40px인 경우입니다. 줄이는 비율을 안쪽 기본 크기 60 : 260으로 정하므로 여백이 없을 때(75 · 225)와 결과가 다릅니다. 이 도구의 크기 풀이 카드는 이 계산을 '모자란 100의 (1 × 60) / 320'처럼 그대로 적어 보여 줍니다. shrink 합이 1보다 작을 때도 grow와 같은 규칙이 적용됩니다. 안쪽 300px에서 기본 크기 200·200에 shrink를 0.2씩 주면 합이 0.4라 모자란 100px 가운데 40%인 40px만 줄여 180 · 180이 되고, 나머지 60px은 넘칩니다.

줄어들지 않는 항목: min-width: auto

flex-shrink가 1이어도 항목은 내용의 최소 폭보다 작아지지 않습니다. 스크롤 컨테이너가 아닌 flex 항목에서는 min-width(세로 방향이면 min-height)의 기본값 auto가 '내용 기반 최소 크기'로 계산되기 때문입니다(명세 §4.5). 줄바꿈할 곳이 없는 긴 주소, white-space: nowrap을 준 글자, 원래 크기가 큰 그림은 그래서 컨테이너를 뚫고 넘칩니다. 예시 '줄지 않는 긴 주소'에서 무대 오른쪽에 그려지는 붉은 빗금이 넘친 길이입니다.

• 그 항목에 min-width: 0을 주면 내용보다 작게 줄어들 수 있습니다. 다만 글자가 저절로 줄바꿈되지는 않으므로 overflow-wrap: anywhere나 말줄임으로 넘친 글자를 따로 처리합니다.
• overflow를 hidden·auto처럼 visible이 아닌 값으로 두면 그 항목은 스크롤 컨테이너가 되어 자동 최소 크기가 0이 됩니다.
• 세로 방향 안에 스크롤 목록을 넣었는데 목록이 스크롤되지 않고 늘어나기만 한다면 그 항목에 min-height: 0이 필요한 경우가 많습니다.
• 한글은 기본 설정에서 음절 사이에서도 줄을 바꿀 수 있어 최소 폭이 한 글자 폭까지 작아집니다. 예시의 '주소'가 두 줄로 나뉘는 이유입니다. word-break: keep-all을 쓰면 낱말 단위로 줄을 바꿉니다.

auto 여백으로 하나만 밀어내기

가로 배치에서 항목에 margin-left: auto를 주면 그 여백이 남는 공간을 모두 가져가 항목이 끝 쪽으로 밀려납니다. 명세는 justify-content와 align-self로 정렬하기 전에 양수인 남는 공간을 먼저 auto 여백에 나눠 준다고 정합니다(§8.1). 그래서 auto 여백이 있는 줄에서는 justify-content를 바꿔도 움직임이 없습니다. 예시 '내비게이션 바'는 로그인 항목에만 앞쪽 auto 여백을 줘서 나머지 메뉴는 왼쪽에, 로그인만 오른쪽 끝에 둡니다. 양쪽에 auto를 주면 그 항목이 남는 공간의 가운데에 놓입니다. 이 도구의 '주축 auto 여백'은 방향에 맞춰 margin-left·right·top·bottom 가운데 알맞은 쪽을 코드에 적습니다.

gap과 남는 공간이 함께 있을 때

flex 컨테이너는 공간을 이 순서로 정합니다. 먼저 안쪽 크기에서 항목 사이의 gap을 빼고, 남은 공간을 grow나 shrink로 나눕니다. 그래도 공간이 남으면 auto 여백이, 그다음 justify-content가 배치합니다. 크기 풀이의 첫 줄 '안쪽 크기 − 간격 − 기본 크기 합 = 남는 공간'이 바로 이 순서입니다. row 방향에서는 column-gap이 같은 줄 항목 사이, row-gap이 줄과 줄 사이에 들어가고, column 방향에서는 그 반대입니다.

gap은 항목 사이에만 생기고 컨테이너 테두리와 첫 항목 사이에는 생기지 않습니다. 가장자리 여백은 부모의 padding으로 줍니다. space-between과 gap을 함께 쓰면 보이는 간격이 gap보다 넓어지고, 항목이 하나뿐인 줄에는 gap이 없습니다.

order와 reverse는 화면 순서만 바꿉니다

order는 값이 작은 항목부터 앞에 놓고, 같은 값끼리는 HTML 순서를 따릅니다. row-reverse와 column-reverse도 화면에서만 순서를 뒤집습니다. 키보드 Tab 이동과 화면 읽기 프로그램은 HTML 순서를 따르므로, 명세는 order를 논리적 순서가 아닌 시각적 순서를 바꾸는 데만 쓰라고 하고(§5.4), order나 *-reverse를 올바른 소스 순서 대신 쓰지 말라고 적습니다(§5). 이 도구의 무대에서도 화살표 키는 화면 위치가 아니라 HTML 순서(번호 순)로 항목을 옮겨 다닙니다.

브라우저 지원

표의 숫자는 MDN 브라우저 호환성 자료에 적힌 처음 지원 버전입니다. flex 레이아웃의 gap을 지원하지 않는 오래된 브라우저까지 맞춰야 한다면 항목의 margin으로 간격을 대신합니다.

자주 틀리는 경우

• 세로 가운데 정렬이 안 됩니다. 부모 높이가 내용 높이와 같아 교차축에 남는 공간이 없는 경우입니다. 부모에 height나 min-height를 줍니다.
• column에서 justify-content가 움직이지 않습니다. 세로 방향의 주축은 높이이므로 부모 높이가 정해져 있어야 남는 공간이 생깁니다.
• flex: 1을 줬는데 너비가 다릅니다. 긴 낱말이나 그림 때문에 내용의 최소 폭이 나눠 받는 몫보다 큰 항목이 있습니다. 그 항목에 min-width: 0을 검토합니다.
• 마지막 줄 카드만 넓어집니다. 줄마다 남는 공간을 따로 나누기 때문입니다. 칸 너비를 맞추려면 Grid를 쓰거나 grow를 0으로 둡니다.
• 손자 요소까지 정렬하려 합니다. display: flex는 바로 아래 자식만 flex 항목으로 만듭니다. 안쪽 요소를 정렬하려면 그 부모에도 display: flex를 줍니다.
• center로 두었더니 넘친 앞부분이 잘립니다. 항목이 넘치면 center는 양쪽으로 넘쳐 시작 쪽을 스크롤로도 볼 수 없게 됩니다. Chromium 151에서 200px 컨테이너에 300px 분량을 두면 첫 항목이 50px 앞으로 나갔고, justify-content: safe center로 바꾸면 시작 쪽에 붙었습니다.
• order로 순서를 바꿨는데 Tab 순서가 그대로입니다. 정상입니다. 읽는 순서까지 바꿔야 한다면 HTML 순서를 고칩니다.

한계와 주의

• 무대는 왼쪽에서 오른쪽으로 가로쓰기 하는 방향만 보여 줍니다. rtl이나 세로쓰기 문서에서는 시작 쪽이 달라집니다.
• 항목 안에는 글자 한 묶음만 넣을 수 있습니다. 그림, 고정 너비 자식, 안쪽 flex가 있는 실제 화면에서는 최소 폭이 다르게 나옵니다.
• 크기 풀이는 지금 브라우저에서 잰 내용 크기(max-content·min-content)로 명세 §9.7을 다시 계산합니다. 1px 넘게 어긋나는 줄이 있으면 그 줄은 브라우저 값을 보여 주고 따로 알립니다.
• flex-basis가 안쪽 여백 + 테두리보다 작으면(예: border-box에서 0) 명세의 주석은 바깥 기본 크기를 0으로 설명합니다. Chromium 151은 안쪽 여백 + 테두리에서 시작해 계산하며, 이 도구는 그 결과에 맞춘 값을 씁니다.
• 최대 크기(max-width·max-height)와 align-self의 교차축 auto 여백은 조절하지 않습니다.
• 복사한 코드는 미디어 쿼리를 만들지 않습니다. 화면 폭에 따라 방향을 바꾸는 규칙은 따로 적어야 합니다.
• 링크 복사는 항목 글자까지 주소에 담습니다. 남에게 보여 주면 안 되는 글자는 넣지 마세요.

기준일 W3C CSS Flexible Box Layout Module Level 1(Candidate Recommendation Draft 2025-10-14), CSS Box Alignment Module Level 3(Working Draft 2026-10-08), MDN 브라우저 호환성 자료는 2026-10-21에 원문으로 확인했습니다. 표의 숫자는 이 도구의 계산 코어로 구했고, 대체 정렬·align-content·기본 크기 하한은 Chromium 151에서 잰 결과입니다.

출처

• 01W3C: CSS Flexible Box Layout Module Level 1Candidate Recommendation Draft 2025-10-14. §4.5 자동 최소 크기, §5·§5.4 순서와 접근성, §7.1.1 flex 기본 값(initial·auto·none·숫자), §8.1 auto 여백, §8.4 align-content, §9.3 줄 나누기, §9.7 유연한 길이 풀기(shrink × 안쪽 기본 크기, grow 합 < 1)
• 02W3C: CSS Box Alignment Module Level 3Working Draft 2026-10-08. §4.3 분배 값과 대체 정렬(space-between = safe flex-start, space-around·space-evenly = safe center), §4.4 safe·unsafe, §5.1.3 flex 컨테이너에서 normal의 동작
• 03MDN: Basic concepts of flexbox주축·교차축, 시작선과 끝선, flex 항목의 기본 동작
• 04MDN: flex브라우저 호환성 표: 접두사 없이 Chrome 29·Firefox 22·Safari 9
• 05MDN: flex-basis브라우저 호환성 표: content Chrome 94·Firefox 61·Safari 15.4, min-content·max-content Chrome 94·Firefox 66·Safari 16
• 06MDN: gap브라우저 호환성 표: flex 레이아웃에서 Chrome 84·Firefox 63·Safari 14.1
• 07MDN: order화면 순서와 읽는 순서가 달라지는 접근성 주의, 브라우저 호환성 표 Chrome 29·Firefox 20·Safari 9

자주 묻는 질문

함께 쓰는 도구