CSS 레이아웃 속성은 이름만 봐서는 결과를 예측하기 어렵습니다. justify-content 와 align-items 중 어느 쪽이 가로축인지, flex-direction: column 을 주면 그 둘이 어떻게 뒤바뀌는지는 직접 값을 바꿔 보며 익히는 편이 훨씬 빠릅니다.
이 도구는 Flexbox와 CSS Grid의 주요 속성을 드롭다운과 슬라이더로 조작하면서 결과를 즉시 확인하고, 완성된 레이아웃을 CSS·HTML·Tailwind 클래스 세 가지 형태로 복사할 수 있게 합니다. 아이템을 클릭하면 flex-grow·align-self·order 같은 개별 속성이나 그리드의 셀 병합(span)도 따로 조절할 수 있습니다.
사용 방법
- 레이아웃 모드 선택 — Flexbox는 한 방향으로 늘어놓는 1차원 레이아웃, CSS Grid는 행과 열을 함께 다루는 2차원 레이아웃입니다. 상단에서 모드를 고르면 그에 맞는 속성 목록으로 바뀝니다.
- 컨테이너 속성 조정 — 왼쪽 패널에서 정렬·방향·줄바꿈·간격을 조정합니다. 미리보기 영역이 실시간으로 반응하므로 각 값이 무엇을 바꾸는지 눈으로 확인할 수 있습니다. 아이템 개수는 상단의 +/− 버튼으로 늘리고 줄입니다.
- 개별 아이템 다듬기 — 미리보기의 아이템을 클릭하면 아래에 그 아이템 전용 속성 패널이 열립니다. Flexbox에서는
flex-grow를 1로 두면 남은 공간을 차지하고, Grid에서는 span 값을 올려 여러 칸을 병합합니다. - 코드 복사 — 하단의 세 패널에서 CSS, HTML, Tailwind 클래스를 각각 복사합니다. CSS 출력에는 기본값과 다른 아이템 속성만 별도 규칙으로 포함되므로 불필요한 코드가 끼어들지 않습니다.
자주 묻는 질문
Flexbox와 Grid 중 무엇을 써야 하나요?
내용의 크기에 맞춰 한 줄(또는 한 열)로 늘어놓는 것이라면 Flexbox, 행과 열을 미리 정의해 두고 그 격자에 배치하는 것이라면 Grid가 자연스럽습니다.
실무에서는 둘을 함께 씁니다. 페이지 전체 골격(헤더·사이드바·본문)은 Grid로 잡고, 헤더 안의 로고와 메뉴 정렬은 Flexbox로 처리하는 식입니다. 카드 목록처럼 개수가 유동적이고 반응형으로 줄바꿈이 필요한 경우에는 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) 한 줄로 미디어 쿼리 없이 해결되는 경우가 많습니다.
`justify-content` 를 바꿔도 아무 변화가 없습니다.
주축(main axis) 방향에 남는 공간이 없기 때문일 가능성이 큽니다.
justify-content 는 아이템들을 배치하고 남은 공간을 어떻게 나눌지 정하는 속성입니다. 아이템들이 컨테이너를 가득 채우고 있거나, 어떤 아이템에 flex-grow: 1 이 걸려 남은 공간을 모두 흡수하고 있다면 변화가 보이지 않습니다. 이 도구에서 아이템 개수를 줄이거나 flex-grow 를 0으로 되돌린 뒤 다시 시도해 보세요.
생성된 Tailwind 클래스가 적용되지 않습니다.
gap-[12px] 같은 임의 값(arbitrary value) 클래스는 Tailwind가 소스 코드를 스캔해 발견해야 생성됩니다.
클래스 이름을 문자열로 조립하는 코드(예: ` gap-[${n}px] )에서는 스캐너가 찾지 못해 스타일이 만들어지지 않습니다. 완성된 클래스 문자열을 그대로 JSX·HTML에 적어 두거나, 값이 유동적이라면 인라인 style` 속성이나 CSS 변수를 쓰세요.
알아두면 좋은 개념
주축과 교차축
Flexbox의 모든 정렬 속성은 주축(main axis)과 교차축(cross axis)을 기준으로 동작합니다. flex-direction: row 면 주축이 가로, 교차축이 세로입니다. column 으로 바꾸면 둘이 뒤바뀝니다.
justify-content 는 항상 주축, align-items 는 항상 교차축을 다룹니다. 그래서 column 방향에서는 justify-content: center 가 세로 가운데 정렬이 되고 align-items: center 가 가로 가운데 정렬이 됩니다. 이 도구에서 방향을 바꿔 가며 두 속성을 조작해 보면 관계가 금방 잡힙니다.
flex 단축 속성 읽는 법
flex: 1 은 flex: 1 1 0% 의 축약이며 'grow 1, shrink 1, basis 0'을 뜻합니다. basis가 0이므로 모든 아이템이 내용 크기와 무관하게 남은 공간을 균등하게 나눠 갖습니다.
반면 flex: auto 는 1 1 auto 라서 내용 크기를 먼저 반영한 뒤 남은 공간을 나눕니다. 내용 길이가 다른 아이템을 같은 너비로 만들고 싶다면 flex: 1 을, 내용에 비례한 너비를 원하면 flex: auto 를 쓰세요. 또 하나 자주 겪는 문제로, flex 아이템의 min-width 기본값이 auto 라서 긴 텍스트가 컨테이너를 밀어내는 일이 있습니다. min-width: 0 을 주면 해결됩니다.
gap — margin을 대체하는 간격
예전에는 아이템 사이 간격을 margin-right 로 주고 마지막 아이템만 :last-child 로 제거하는 방식이 관행이었습니다. gap 은 컨테이너에 한 번만 선언하면 아이템 사이에만 간격을 넣어 주므로 이런 예외 처리가 필요 없습니다.
Grid에는 오래전부터 있었고 Flexbox에서도 모든 최신 브라우저가 지원합니다. row-gap·column-gap 으로 방향별 값을 따로 줄 수도 있습니다. 줄바꿈이 일어나는 레이아웃에서 특히 유용한데, margin 방식으로는 줄과 줄 사이 간격을 깔끔하게 다루기 어렵기 때문입니다.