Nifty

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

flex-direction, justify-content, align-items, flex-wrap, gap 드롭다운으로 CSS 플렉스박스 컨테이너를 만들고, 실시간 미리보기를 확인하며 완성된 CSS를 복사하세요 — 100% 브라우저에서 실행되며 업로드되지 않습니다.

실시간 미리보기

1
2
3
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
align-content: stretch;
gap: 8px;

🔒 브라우저에서 생성되며 업로드되지 않습니다.

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

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

바로 붙여넣는 CSS 출력

이 도구는 항상 display: flex로 시작하고 선택한 flex-direction, justify-content, align-items, flex-wrap, gap을 이어서 나열하는, 바로 붙여넣을 수 있는 선언 블록을 출력합니다. 이 블록을 스타일시트의 클래스나 컨테이너 요소의 인라인 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는 모두 브라우저에서 자바스크립트로 처리됩니다. 선택한 값과 생성된 플렉스박스 코드는 어디로도 전송, 저장, 업로드되지 않습니다.