CSS 플렉스박스 생성기

flex 정렬 옵션을 조절해 CSS 코드를 만듭니다.

flex-direction justify-content align-items flex-wrap gap(px) 8 아이템 수 5

justify-content: center를 넣었는데 가로가 아니라 세로로 가운데 정렬돼서 당황한 적이 있으실 겁니다. 플렉스박스는 속성 이름만 봐서는 어느 방향에 적용되는지 감이 잘 오지 않습니다.

이 도구는 다섯 가지 주요 속성을 조절하면 아이템이 실제로 어떻게 배치되는지 즉시 보여주고, 그 결과에 해당하는 CSS를 완성된 형태로 만들어 줍니다. 눈으로 확인한 뒤 코드를 복사해 그대로 쓰면 됩니다.

어떻게 계산되나요

조절할 수 있는 것

flex-direction, justify-content, align-items, flex-wrap 네 개는 선택 목록에서 고르고, gap(0~40px)과 미리보기 아이템 개수(1~10개)는 슬라이더로 조절합니다. 값을 바꾸는 즉시 아래 미리보기 상자와 CSS 코드가 함께 갱신됩니다. 코드 옆 복사 버튼을 누르면 .container { ... } 형태로 클립보드에 담깁니다.

헷갈리는 지점: 주축과 교차축

플렉스박스에서 가장 자주 막히는 부분입니다. justify-content는 주축(main axis), align-items는 교차축(cross axis) 방향을 담당하는데, 이 축의 방향이 flex-direction 값에 따라 뒤바뀝니다.

flex-direction	주축(justify-content)	교차축(align-items)
row / row-reverse	가로	세로
column / column-reverse	세로	가로

즉 flex-direction: column인 상태에서 가로 가운데 정렬을 하려면 justify-content가 아니라 align-items: center를 써야 합니다. 미리보기에서 direction을 row와 column으로 번갈아 바꿔 보면 이 차이가 바로 눈에 들어옵니다.

알아둘 점

align-items: stretch(기본값)는 아이템에 높이가 지정되지 않았을 때만 늘어납니다. 높이가 있으면 효과가 없습니다.
flex-wrap: nowrap(기본값)에서는 아이템이 줄바꿈되지 않고 찌그러집니다. 여러 줄로 흘리려면 wrap으로 바꾸세요.
gap은 아이템 사이 간격만 만들고 컨테이너 바깥 여백은 만들지 않습니다. 바깥 여백은 padding으로 따로 주어야 합니다.
생성되는 코드는 컨테이너 속성만 담고 있습니다. flex-grow, flex-basis 같은 아이템 개별 속성은 각 자식 요소에 직접 지정하세요.

용어 정리

주축(main axis): flex-direction이 정하는 기본 흐름 방향입니다. row면 가로, column이면 세로가 주축이 됩니다.
교차축(cross axis): 주축과 직각을 이루는 방향입니다. row일 때는 세로, column일 때는 가로입니다.
justify-content: 주축 방향으로 아이템을 어떻게 배치할지 정합니다. space-between은 양끝에 붙이고 사이를 균등하게, space-evenly는 바깥 여백까지 모두 균등하게 나눕니다.
align-items: 교차축 방향 정렬입니다. baseline은 아이템 안 글자의 기준선을 맞춥니다.
flex-wrap: 아이템이 한 줄에 다 안 들어갈 때 줄바꿈 여부입니다. wrap-reverse는 넘친 줄이 위쪽에 쌓입니다.
gap: 아이템 사이 간격입니다. 예전에 쓰던 margin 방식과 달리 맨 끝에 불필요한 여백이 남지 않습니다.

자주 묻는 질문

flex-direction을 column으로 했더니 justify-content가 안 먹습니다.

안 먹는 게 아니라 방향이 바뀐 것입니다. column에서는 주축이 세로라 justify-content가 위아래 정렬을 담당합니다. 가로 정렬은 align-items로 하셔야 합니다. 미리보기에서 두 값을 바꿔 보면 확인할 수 있습니다.

가로·세로 모두 가운데 정렬하려면 어떻게 하나요?

direction과 상관없이 justify-content: center와 align-items: center를 함께 주면 됩니다. 두 축을 모두 가운데로 맞추기 때문에 방향이 바뀌어도 결과가 같습니다.

생성된 코드에 flex-grow나 flex 속성은 왜 없나요?

이 도구는 컨테이너에 적용하는 속성만 만듭니다. flex-grow, flex-shrink, flex-basis, align-self는 아이템 하나하나에 붙이는 속성이라 자식 요소 쪽 CSS에 직접 작성하셔야 합니다.

gap 속성은 구형 브라우저에서도 되나요?

플렉스박스의 gap은 비교적 나중에 추가된 기능이라 아주 오래된 브라우저에서는 무시될 수 있습니다. 그 경우 아이템에 margin을 주고 첫/마지막 아이템만 예외 처리하는 방식으로 대체합니다.

그리드(grid)와는 언제 나눠 쓰나요?

한 방향으로 줄 세우는 배치는 플렉스박스가 간편하고, 행과 열을 동시에 맞춰야 하는 이차원 레이아웃은 CSS 그리드가 적합합니다. 둘을 섞어 바깥은 그리드, 안쪽은 플렉스로 쓰는 경우도 많습니다.