CSS Flexbox 실험판
방향과 정렬을 고르고, 간격을 다듬어 보세요. 미리보기에서 배치를 확인한 뒤 CSS를 복사해 원하는 요소에 적용하세요.
컨테이너 설정
01 / CONTAINERnowrap에서는 적용되지 않습니다.
선택한 항목 01
02 / ITEM미리보기의 번호를 눌러 항목을 선택하세요.
실시간 미리보기
LIVErow에서는 주축이 가로, 교차축이 세로입니다.
.item-1 { flex: 0 1 auto; order: 0; }바로 쓰는 코드
03 / EXPORT선택 표시를 제외한 배치·크기·기본 스타일이 코드에 포함됩니다. HTML과 CSS를 함께 붙여 넣어 사용하세요. 시각적 순서를 바꿔도 HTML·키보드 탐색 순서는 바뀌지 않습니다.
바로 쓸 수 있게.
- 바로 보이는 화면입력 위치와 결과 위치를 또렷하게 둡니다.
- 결과 먼저핵심 결과를 앞에 두고, 과정은 필요할 때만 보여줍니다.
- 요구 줄이기가입이나 불필요한 정보 입력 없이 바로 쓰게 합니다.
Flexbox 정렬이 달라지는 이유, 직접 바꾸며 이해하기
CSS Flexbox 실험판은 여러 항목을 한 방향으로 배치하는 Flexbox의 동작을 확인하고 CSS를 만드는 도구입니다. 버튼 묶음, 메뉴, 카드처럼 내용의 크기가 달라도 정렬과 간격을 맞춰야 하는 화면에 활용하세요. 가로·세로 방향을 바꾸며 각 설정이 어느 축에 적용되는지 비교할 수 있습니다.
정렬이 예상과 다르면 속성 이름보다 남는 공간과 항목 크기를 먼저 살펴보세요. 줄바꿈 여부, 기본 크기, 늘어남과 줄어듦이 함께 배치를 결정합니다. 아래에서는 조작 순서와 자주 쓰는 배치를 설명하고, 복사한 CSS를 실제 페이지에 넣었을 때 확인할 부분을 짚습니다.
Flexbox에서 부모와 자식은 어떤 역할인가요?
부모 요소에 display: flex;를 지정하면 일반적인 문서 흐름에 놓인 바로 아래 자식 요소가 flex 항목이 됩니다. 부모는 방향·줄바꿈·정렬·간격을 정하고, 자식은 자신의 늘어남·줄어듦·기본 크기를 정합니다. 손자 요소까지 모두 같은 줄에 놓이는 것은 아닙니다.
- 버튼이나 메뉴를 한 줄로 나란히 두고 간격을 맞출 때 사용합니다.
- flex-direction으로 배치의 주축을 정합니다. 항목은 그 축을 따라 놓입니다.
- 여러 줄로 감싸도 각 줄의 공간 분배는 따로 계산합니다. 행과 열의 선을 함께 맞추려면 CSS Grid도 검토하세요.
원하는 배치를 만드는 조작 순서
처음에는 방향과 정렬부터 바꾸고, 그다음 줄바꿈과 간격을 조절하세요. 한 번에 하나씩 바꾸면 어떤 설정 때문에 배치가 달라졌는지 알기 쉽습니다. 전체 배치를 정한 뒤 특정 항목의 크기를 조절하고 마지막에 코드를 복사합니다.
- 프리셋으로 시작하거나 가로·세로 방향을 고른 뒤 주축·교차축의 정렬을 비교합니다.
- 줄바꿈을 켜고 미리보기를 좁게 바꿔 항목이 다음 줄로 넘어가는지 봅니다.
- 항목 수와 gap을 조절한 뒤 원하는 항목을 선택해 grow·shrink·basis·order를 바꿉니다.
- 완성한 CSS와 HTML을 각각 복사합니다. 실제 페이지의 안쪽 여백은 부모의 padding을 따로 맞추세요.
row와 column에서는 정렬 축이 바뀝니다
주축은 항목이 나열되는 방향이고 교차축은 그에 수직인 방향입니다. 이 도구처럼 가로쓰기를 사용하는 화면에서는 row의 주축이 가로, column의 주축이 세로입니다. justify-content는 주축에, align-items는 교차축에 적용되므로 방향을 바꾸면 정렬이 움직이는 방향도 바뀝니다.
- row: justify-content로 가로 배치를, align-items로 한 줄 안의 세로 정렬을 조절합니다.
- column: justify-content로 세로 배치를, align-items로 가로 정렬을 조절합니다.
- row-reverse와 column-reverse는 주축의 시작과 끝을 뒤집습니다.
- 실제 사이트의 writing-mode나 direction이 다르면 시작 방향도 달라집니다. flex-start를 언제나 왼쪽이라고 기억하지 마세요.
가운데 정렬과 균등 배치의 차이
justify-content는 항목의 크기와 간격을 계산한 뒤 남는 주축 공간을 분배합니다. center는 묶음을 가운데 모으고, space-between은 첫 항목과 마지막 항목을 양 끝에 놓습니다. 항목이 공간을 가득 채우면 정렬값을 바꿔도 움직임이 거의 보이지 않을 수 있습니다.
- space-around는 각 항목 양쪽에 공간을 두므로 항목 사이가 양 끝 여백보다 두 배 넓습니다.
- space-evenly는 양 끝과 항목 사이에 같은 크기의 공간을 분배합니다. 별도 gap이나 margin이 있으면 눈에 보이는 간격은 달라집니다.
- 가로·세로 중앙 배치는 justify-content: center;와 align-items: center;를 함께 사용합니다. 세로 이동을 보려면 부모에 남는 높이가 있어야 합니다.
- align-items: stretch;는 교차축 크기가 auto인 항목을 늘립니다. 이미 고정 높이 또는 너비를 지정했다면 늘어나지 않을 수 있습니다.
줄바꿈과 align-content가 필요한 순간
flex-wrap: wrap;은 주축 공간에 다 들어가지 않는 항목을 다음 줄로 보냅니다. align-items가 각 줄 안에서 항목을 정렬한다면, align-content는 줄 묶음의 교차축 배치를 정합니다. nowrap에서는 align-content가 영향을 주지 않습니다.
- row에서 여러 줄을 비교하려면 너비를 줄이고 줄들을 담는 높이에 여유를 둡니다.
- align-content: flex-start;는 줄을 교차축 시작 쪽에 모으고, space-between은 남는 공간을 줄 사이에 분배합니다.
- wrap이 설정돼 있으면 실제 항목이 한 줄뿐이어도 align-content가 적용될 수 있습니다. 보이는 줄 수와 nowrap 여부를 구별하세요.
- column으로 줄바꿈하려면 세로 주축의 사용 가능한 크기가 제한돼 있어야 합니다. 높이가 내용에 따라 계속 늘어나면 새 열로 넘어가지 않을 수 있습니다.
gap과 padding을 따로 조절하는 이유
gap은 항목이나 줄 사이의 간격이고 padding은 부모 테두리와 내용 사이의 안쪽 여백입니다. gap만 늘려서는 첫 항목과 테두리 사이가 벌어지지 않습니다. 버튼이 서로 붙는 문제와 카드 내용이 가장자리에 붙는 문제를 나누어 조절하세요.
- gap: 12px;는 행 간격과 열 간격에 같은 값을 적용합니다.
- gap: 12px 20px;는 row-gap 12px, column-gap 20px입니다. row에서는 줄 사이가 12px, 같은 줄의 항목 사이가 20px입니다.
- column에서는 row-gap이 같은 열 안 항목 사이, column-gap이 열 사이에 적용됩니다.
- space-between 같은 공간 분배나 항목의 margin을 함께 쓰면 실제 보이는 간격이 gap보다 넓어질 수 있습니다.
grow·shrink·basis로 항목 크기 조절하기
flex-basis는 공간을 나누기 전 주축의 기본 크기입니다. flex-grow는 남는 공간을 받을 비율이고, flex-shrink는 공간이 부족할 때 줄어드는 비율에 관여합니다. grow가 2라고 해서 최종 너비가 항상 다른 항목의 두 배가 되지는 않습니다.
- 기본 크기가 같은 두 항목에 grow를 1과 2로 두면 남는 공간을 1:2로 나눕니다. 기본 크기와 최소·최대 크기 제한도 최종 결과에 영향을 줍니다.
- shrink는 값에 기본 크기를 곱한 비율로 부족한 공간을 나눕니다. 두 항목의 shrink가 같아도 줄어드는 길이가 같지는 않을 수 있습니다.
- flex: 0 0 120px;는 grow 0, shrink 0, basis 120px입니다. 최소·최대 크기나 테두리·여백 조건에 따라 실제 바깥 크기는 달라질 수 있습니다.
- basis의 auto는 주축에 해당하는 width 또는 height를 참고합니다. 그 값도 auto라면 내용의 크기를 바탕으로 계산합니다.
메뉴·버튼·카드로 배치 연습하기
메뉴처럼 내용의 길이를 유지할 배치와 카드처럼 공간을 채울 배치는 출발점이 다릅니다. 간격을 먼저 정하고 항목이 늘어나도 되는지 결정하세요. 아래 값은 직접 CSS에 적용해 볼 수 있는 예시이며 완성된 페이지의 반응형 규칙은 콘텐츠에 맞춰 정해야 합니다.
- 가운데 버튼 묶음: 부모에 display: flex; justify-content: center; align-items: center; gap: 12px;를 지정합니다.
- 여러 줄 태그: 부모에 display: flex; flex-wrap: wrap; gap: 8px;를 지정합니다. 긴 태그가 혼자서도 넘치는지 확인하세요.
- 공간을 나눠 쓰는 카드: 부모에 display: flex; flex-wrap: wrap; gap: 16px;를 주고 자식에 flex: 1 1 200px;를 적용합니다. 마지막 줄의 카드가 넓어질 수 있습니다.
- 세로 버튼 목록: 부모에 display: flex; flex-direction: column; gap: 12px;를 적용합니다. 버튼 너비를 내용에 맞추려면 align-items: flex-start;를 함께 비교하세요.
줄어들지 않는 항목과 긴 글자 해결하기
flex-shrink가 1이어도 긴 주소나 줄바꿈 없는 문자열 때문에 항목이 넘칠 수 있습니다. flex 항목의 자동 최소 크기가 내용 크기를 반영하기 때문입니다. 가로 배치에서는 해당 항목에 min-width: 0;을 적용해 줄어들 여지를 만들고, 내용의 줄바꿈이나 잘림 방법을 별도로 정하세요.
- min-width: 0;은 항목의 최소 너비 제한을 낮춥니다. 그 자체가 긴 글자를 줄바꿈해 주지는 않습니다.
- 긴 문자열을 줄바꿈하려면 overflow-wrap: anywhere;를 함께 검토합니다.
- 이미지의 원래 너비, white-space: nowrap;, 자식 요소의 고정 너비도 확인합니다.
- 세로 배치의 스크롤 영역이 줄어들지 않는 문제에는 min-height: 0;이 필요한 경우가 있습니다.
order를 바꿀 때 읽는 순서도 확인하세요
order는 항목을 화면에 배치하는 순서를 바꿉니다. 값이 작을수록 앞쪽에 배치되고 같은 값끼리는 HTML에 적힌 순서를 따릅니다. order나 reverse만 바꿔서는 HTML 순서가 바뀌지 않으므로 화면의 순서와 보조기기·키보드로 따라가는 순서가 달라질 수 있습니다.
- 단계 안내, 입력 폼, 읽는 순서가 중요한 내용은 HTML부터 자연스러운 순서로 작성하세요.
- 링크나 버튼이 있으면 Tab 키로 이동하며 화면의 배치와 초점 이동을 함께 확인합니다.
- 실제 CSS에서 하나의 항목만 교차축 위치를 바꾸려면 align-self를 추가합니다. 이 도구의 개별 항목 조절은 grow·shrink·basis·order를 제공합니다.
- 보기 좋은 순서를 맞추려고 양수 tabindex를 추가하기보다 문서 구조와 CSS 배치를 함께 검토하세요.
코드를 붙여 넣기 전 확인할 것
생성한 CSS에서 부모 규칙과 항목 규칙을 구별해 실제 HTML의 클래스에 적용하세요. 미리보기는 설정한 항목으로 Flexbox 동작을 보여 줍니다. 사이트의 실제 글꼴, 이미지, 긴 문장, 다른 CSS 규칙까지 그대로 재현하지는 않습니다.
- 부모에 display: flex;가 적용되고 대상 항목이 바로 아래 자식인지 확인합니다.
- CSS 선택자를 실제 클래스에 맞추고 기존 width·height·margin·min-width가 결과에 영향을 주는지 살펴봅니다.
- 좁은 화면과 넓은 화면에서 긴 문구를 넣어 줄바꿈과 안쪽 여백을 확인합니다.
- 미리보기 너비를 바꾸는 것만으로 사이트의 미디어 쿼리가 자동 생성되는 것은 아닙니다. 화면 크기에 따른 방향 전환은 별도로 작성하세요.
- 복사한 Flexbox 배치를 표시하는 데 JavaScript는 필요하지 않습니다.
CSS Flexbox 실험판 자주 묻는 질문
Flexbox로 가로와 세로를 모두 가운데 정렬하려면 어떻게 하나요?
부모에 display: flex;, justify-content: center;, align-items: center;를 적용합니다. 세로로 움직일 공간이 없다면 차이가 보이지 않으므로 부모의 높이와 항목 크기도 확인하세요.
justify-content와 align-items는 무엇이 다른가요?
justify-content는 주축의 공간을 분배하고 align-items는 각 줄 안에서 교차축 정렬을 정합니다. 가로쓰기 화면의 row에서는 각각 가로와 세로, column에서는 세로와 가로에 적용됩니다.
align-content를 바꿔도 움직이지 않는 이유는 무엇인가요?
flex-wrap이 nowrap이면 align-content가 적용되지 않습니다. wrap 또는 wrap-reverse인지 확인하고 교차축에 분배할 여유 공간이 있는지 살펴보세요. wrap에서는 실제 항목이 한 줄이어도 영향을 줄 수 있습니다.
gap을 늘렸는데 테두리와 내용 사이는 그대로예요.
gap은 항목이나 줄 사이의 간격만 정합니다. 테두리와 내용 사이의 안쪽 여백은 부모의 padding으로 조절하세요.
flex-grow: 2는 다른 항목보다 두 배 넓다는 뜻인가요?
아니요. grow는 최종 너비가 아니라 남는 공간을 나누는 비율입니다. 기본 크기와 최소·최대 크기 제한이 함께 작용하므로 최종 너비가 두 배가 된다고 볼 수 없습니다.
flex-shrink를 켰는데 긴 글자가 계속 넘치는 이유는 무엇인가요?
내용을 반영한 자동 최소 크기가 항목의 축소를 막을 수 있습니다. 가로 배치라면 항목의 min-width: 0;을 검토하고 긴 문자열의 줄바꿈, 이미지 너비, white-space 설정을 함께 확인하세요.
여러 줄 카드의 마지막 줄만 넓어지는 이유는 무엇인가요?
Flexbox는 줄마다 남는 공간을 따로 나눕니다. 카드의 flex-grow가 양수라면 항목이 적은 마지막 줄에서 카드가 더 넓어질 수 있습니다. 행과 열의 선을 함께 맞추려면 CSS Grid도 검토하세요.
order를 바꾸면 키보드 이동 순서도 바뀌나요?
order 자체는 HTML 순서를 바꾸지 않습니다. 화면에서 보이는 순서와 키보드 초점 이동 또는 화면 읽기 순서가 달라질 수 있으므로 링크와 버튼이 있는 배치는 직접 확인하세요.
생성한 CSS를 쓰려면 JavaScript도 복사해야 하나요?
아니요. Flexbox 배치는 브라우저가 CSS로 처리합니다. 생성한 부모와 항목 규칙을 실제 HTML 구조에 맞게 적용하면 됩니다.
미리보기와 실제 사이트의 배치가 다르면 무엇부터 확인하나요?
부모의 사용 가능한 크기와 자식 구조부터 확인하세요. 글꼴·문구 길이·이미지 크기, 기존 CSS의 width·margin·min-width도 결과에 영향을 줍니다. 좁은 화면에서 방향을 바꾸는 규칙은 별도로 작성해야 합니다.
Flexbox 문법과 사용 기준
축과 공간 분배, 항목 크기, 순서의 동작은 W3C Flexbox 명세와 MDN 설명을 확인했습니다. 아래 링크에서 속성별 문법과 예시를 더 살펴볼 수 있습니다. 확인일은 2026년 9월 27일입니다.
함께 쓰는 CSS 도구
배치를 정했다면 길이 단위를 맞추거나 생성한 CSS를 읽기 좋게 정리해 보세요. 배경색을 함께 비교할 때는 그라데이션 생성기를 사용할 수 있습니다.