Flexbox 편집기

Flexbox 시각 편집기란?#

Flexbox는 요소들을 단일 방향(행 또는 열)을 따라 정렬하고 그 사이의 여유 공간을 분배하는 CSS 레이아웃 엔진입니다. 예전에는 float, 음수 마진, 시행착오가 필요했던 질문에 답합니다. “이것을 세로로 가운데 정렬하려면?”, “이 세 열을 같은 높이로 만들려면?”, “나머지는 왼쪽에 둔 채 한 항목을 오른쪽 끝으로 밀려면?”. 이해하고 나면 거의 모든 페이지에서 쓰게 됩니다. 하지만 그 전에는 속성명(justify-content, align-items, flex-grow)이 숙련된 개발자도 넘어지게 만드는데, 명세가 평범한 영어 단어를 매우 정밀한 레이아웃 의미로 중복 사용하기 때문입니다.

이 페이지는 실시간 Flexbox 놀이터입니다. 왼쪽 사이드바에서 컨테이너 속성과 항목별 오버라이드를 조정하면 오른쪽 창이 즉시 결과를 보여주고, 그 결과를 만들어낸 정확하고 복사-붙여넣기 가능한 CSS를 작성해 줍니다. 요점은 어느 값이 무엇을 하는지 추측하는 것을 멈추고, 바꾸는 순간 효과를 보는 것입니다. 그리고 작동한 규칙을 복사하는 것이죠.

사용 방법#

레이아웃은 컨트롤 사이드바와 미리보기 + CSS 출력 패널로 나뉩니다.

1. 컨테이너를 설정하세요. 사이드바의 드롭다운을 사용합니다.
   • 방향 — row, row-reverse, column, column-reverse.
   • 콘텐츠 정렬 — 주축을 따라 여유 공간을 분배합니다. flex-start, center, flex-end, space-between, space-around, space-evenly.
   • 항목 정렬 — 교차축을 따라 자식을 배치합니다. stretch, flex-start, center, flex-end, baseline.
   • 줄바꿈 — nowrap은 모두 한 줄에 유지하고, wrap과 wrap-reverse는 자식이 새 줄로 흐르게 합니다.
   • 여러 줄 정렬 — 줄바꿈이 켜졌을 때만 나타나며, 줄바꿈된 자식들의 줄 간격을 조정합니다.
   • 간격 — 0부터 64 px까지 슬라이더. 실시간 값이 라벨 옆에 표시됩니다.
2. 항목을 관리하세요. 항목 헤더 아래에서 항목 추가는 또 다른 flex 자식을 끼워 넣습니다. 각 항목 행은 확장, 축소, 기본 크기, 순서, 개별 정렬(컨테이너의 align-items에 대한 자식별 오버라이드)을 노출합니다. 자식은 삭제 버튼으로 지웁니다.
3. 미리보기를 보세요. 오른쪽의 큰 상자가 실제 flex 컨테이너입니다. 모든 변경이 즉시 다시 그려집니다.
4. CSS를 복사하세요. 생성된 규칙 블록이 미리보기 아래에 있습니다. 복사를 클릭해 가져가세요. 모든 항목이 같은 값을 공유하면 단일 .item 블록이 내보내지지만, 어느 항목 하나라도 다르면 출력이 자식별로 하나씩의 .item:nth-child(N) 블록으로 전환되어 각 오버라이드가 모호해지지 않습니다.

주요 특징#

• 컨테이너와 자식별 속성이 한곳에. Flexbox의 어떤 것도 숨겨지지 않습니다. flex-direction, 두 정렬 축, 줄바꿈, gap, 그리고 항목별 grow/shrink/basis/order/align-self가 모두 실시간입니다.
• 정확하고 최소한의 CSS 출력. align-content는 줄바꿈이 실제로 켜졌을 때만 내보내지고(단일 줄에서는 아무것도 하지 않습니다), 같은 항목은 한 블록으로 합쳐지며, order와 align-self는 기본값이 아닐 때만 나타납니다. 출력은 보이는 것을 재현하는 가장 짧은 규칙입니다.
• flex 단축 표기를 제대로 처리. 각 자식은 flex: <grow> <shrink> <basis>로 직렬화됩니다. 단축 표기에서 빠진 값의 놀라운 기본값을 피하는 정규의 세 값 형태입니다.
• 기본 크기 검증. auto, 0, 200px, 50%, 10rem을 입력하면 받아들여집니다. 유효하지 않은 기본 크기는 표시되고 조용히 깨진 CSS를 만드는 대신 auto로 떨어집니다.
• 미리보기는 좌에서 우로 강제. Flexbox의 row는 좌에서 우 의미로 정의되므로, 미리보기는 페이지 언어와 무관하게 LTR로 고정됩니다. 보이는 것이 스타일시트가 할 일과 일치합니다.

실제 예시#

흔한 레이아웃: 로고는 왼쪽에 고정, 제목은 남은 공간을 차지, 액션은 오른쪽에 고정인 헤더 행이며, 고정된 간격으로 균등 배치됩니다.

• 방향: row
• 콘텐츠 정렬: space-between
• 항목 정렬: center
• 줄바꿈: nowrap
• 간격: 16px
• 항목: 세 자식, 가운데 것은 확장 1이라 여유 공간을 흡수하고, 나머지 둘은 기본 flex: 0 1 auto.

생성된 CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.item:nth-child(1) {
  flex: 0 1 auto;
}

.item:nth-child(2) {
  flex: 1 0 auto;
}

.item:nth-child(3) {
  flex: 0 1 auto;
}

두 번째 자식은 자라나고 나머지는 자라나지 않으므로, 출력은 정확히 세 개의 분리된 nth-child 블록을 사용합니다. 이것을 어떤 프로젝트에든 넣으면 로고는 왼쪽 가장자리에, 액션은 오른쪽에, 제목은 가운데를 채웁니다. float도 마진도 없습니다.

FAQ#

justify-content와 align-items 중 어느 게 어느 건가요?#

justify-content는 항상 주축을 따라 작동합니다(flex-direction이 정한 방향. row에서는 수평, column에서는 수직). align-items는 항상 교차축을 따라 작동합니다(주축에 수직). 그래서 row에서는 justify-content가 좌/우 간격을 제어하고 align-items가 위/아래 정렬을 제어합니다. 방향을 column으로 바꾸면 역할이 바뀝니다. “justify = 주축, align = 교차축”을 기억하면 가장 흔한 Flexbox 혼란을 피할 수 있습니다.

flex-grow는 언제 실제로 작동하나요?#

흡수할 여유 공간이 있을 때만입니다. 세 자식이 각각 flex-grow: 1이고 컨테이너가 자식이 필요로 하는 것보다 넓으면, 남은 공간이 3등분되어 동등하게 더해집니다. 컨테이너가 꽉 차 있으면 아무것도 자라지 않습니다. flex-grow: 0(기본값)으로 두면 자식은 확장을 거부하고 형제들이 공간을 가져갑니다. flex-shrink는 거울입니다. 공간이 부족할 때 누가 먼저 양보할지를 결정합니다.

gap이 나타나지 않아요. 왜 그런가요?#

세 가지 흔한 원인: 자식이 컨테이너를 가득 채우는 고정 너비를 가져 간격이 들어갈 공간이 없거나, flex-wrap: nowrap이 자식을 갭 인식 레이아웃으로 줄바꿈하는 대신 넘치게 하거나, 자식의 마진이 갭을 시각적으로 가리는 경우. 여기 슬라이더는 64 px까지입니다. 더 필요하면 기저 속성이 모든 길이를 받으므로 CSS를 복사해 자신의 파일에서 gap을 올리세요.

출력이 nth-child를 쓰는데, 클래스를 쓸 수도 있나요?#

물론입니다. .item:nth-child(N) 선택자는 항목이 다를 때 미리보기에 모호하지 않게 매핑되도록 내보내집니다. 실제 코드에서는 자신의 클래스(.logo, .title, .action)로 바꾸세요. 안의 선언은 동일하게 유지됩니다. 모든 자식이 일치하면 도구는 이미 한 곳에서 이름을 바꿀 수 있는 단일 공유 .item 블록을 내보냅니다.