MakerBox

실시간 미리보기 CSS 플렉스박스 생성기

컨테이너의 flex-direction·justify-content·align-items·wrap·gap을 정하고, 아이템별로 order·grow·shrink·basis·align-self까지 지정하세요.

display 설명
flex-direction 설명
justify-content 설명
align-items 설명
flex-wrap 설명
align-content 설명

align-content는 flex-wrap이 wrap 또는 wrap-reverse일 때만 동작합니다. nowrap이면 줄이 하나뿐이라 정렬할 것이 없어서 아래 CSS에서 빠집니다.

실시간 미리보기

1
2
3

아이템을 클릭하면 그 아이템만의 크기와 순서를 정할 수 있습니다.

결과 6줄, 115자
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

이 플렉스박스 생성기가 하는 일

CSS 플렉스박스는 컨테이너가 자식 요소를 가로 행이나 세로 열로 배치하게 해 주는 1차원 레이아웃 모델입니다. 각 핵심 속성 값을 고르기만 하면 됩니다 — 주축을 정하는 flex-direction, 주축을 따라 아이템을 분배하는 justify-content, 교차축에서 아이템을 정렬하는 align-items, 줄바꿈을 허용하거나 막는 flex-wrap, 그리고 아이템 사이 간격을 픽셀로 지정하는 gap입니다. 줄바꿈을 켜면 align-content가 넘어간 줄들을 교차축 어디에 둘지 정합니다. 아이템 개수를 정한 뒤에는 각 아이템에 order·flex-grow·flex-shrink·flex-basis·align-self를 따로 줄 수 있습니다. 번호가 매겨진 상자들의 실시간 미리보기가 변경할 때마다 즉시 다시 배치되어, 코드를 복사하기 전에 각 속성이 어떻게 동작하는지 정확히 확인할 수 있습니다.

바로 붙여넣는 CSS 출력

이 도구는 display: flex(또는 고르셨다면 display: inline-flex)로 시작하고 선택한 flex-direction, justify-content, align-items, flex-wrap, 줄바꿈을 켰을 때의 align-content(nowrap에서는 효과가 없어 빠집니다), gap을 이어서 나열하고, 그 아래에 값을 따로 준 아이템마다 .item-N 규칙을 하나씩 붙이는, 바로 붙여넣을 수 있는 선언 블록을 출력합니다. 이 블록을 스타일시트의 클래스나 컨테이너 요소의 인라인 style 속성에 그대로 붙여넣으면 됩니다. 출력에 무작위 요소가 없어 같은 선택은 항상 완전히 같은 CSS를 만들므로, 속성들이 어떻게 조합되는지 학습하거나 어떤 레이아웃이든 올바른 시작점을 얻는 데 유용합니다.

자주 묻는 질문

justify-content와 align-items의 차이는 무엇인가요?

justify-content는 아이템을 주축(flex-direction으로 정한 방향)을 따라 분배하고, align-items는 교차축을 따라 정렬합니다. 행(row)에서는 justify-content가 아이템을 좌우로 움직이고 align-items가 위아래로 움직입니다.

왜 일부 justify-content 값이 미리보기에서 똑같아 보이나요?

space-between, space-around, space-evenly 같은 값은 아이템이 컨테이너보다 작아 분배할 여백이 있을 때만 눈에 띄게 달라집니다. 아이템이 적거나 줄바꿈된 레이아웃에서는 퍼뜨릴 공간이 생기기 전까지 간격이 비슷해 보일 수 있습니다.