MakerBox

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

flex-direction, justify-content, align-items, flex-wrap, gap, align-content와 아이템별 order·grow·shrink·basis·align-self로 플렉스박스 CSS를 만드세요 — 100% 브라우저 처리, 업로드 없음.

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

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

실시간 미리보기

1
2
3

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

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

만든 내용이 서버로 업로드되나요?

아니요. 실시간 미리보기와 생성된 CSS는 모두 브라우저에서 자바스크립트로 처리됩니다. 선택한 값과 생성된 플렉스박스 코드는 어디로도 전송, 저장, 업로드되지 않습니다.