CSS Flexbox 생성기

CSS flexbox 레이아웃을 시각적으로 만듭니다. 방향, 정렬, 줄 바꿈, 간격을 조정하면서 결과를 실시간으로 확인하세요.

flex-directionjustify-contentalign-itemsflex-wrap

gap: 8px

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

이 도구 사용 방법

1
Pick values from the four dropdowns: flex-direction, justify-content, align-items, and flex-wrap.
2
Drag the gap slider to set the spacing between items, from 0 to 40 pixels.
3
Watch the live preview of four numbered boxes update instantly to reflect each change.
4
Click 'Copy CSS' to copy the generated declaration block, then paste it onto your own flex container.

CSS Flexbox 생성기란 무엇인가요?

Flexbox는 CSS에서 요소를 배치하는 최신 방식으로, float나 절대 위치 지정보다 훨씬 간단합니다. 속성은 다음과 같습니다. flex-direction(행 또는 열), justify-content(주축 정렬), align-items(교차축), flex-wrap, gap. 이 도구는 이 모든 속성을 실시간 미리 보기와 함께 제공합니다.

일반적인 사용 사례

Aligning a horizontal navigation bar so links sit at flex-start and a logo or button pushes to flex-end with space-between.
Centering a single element both horizontally and vertically using justify-content: center and align-items: center.
Spacing a row of buttons or tags evenly with a fixed gap instead of fragile margins.
Stacking form fields vertically by switching flex-direction to column while keeping consistent gap spacing.
Letting a row of cards wrap onto new lines on narrow screens with flex-wrap: wrap.
Learning how justify-content and align-items behave by toggling values and watching the live preview before committing the code.

자주 묻는 질문

Flexbox와 Grid 중 무엇을 써야 하나요?▼

1차원 레이아웃(버튼 한 줄, 내비게이션 바)에는 flexbox를 사용하세요. 2차원 레이아웃(반응형 그리드의 카드)에는 CSS Grid를 사용하세요.

CSS Flexbox 생성기

이 도구 사용 방법

CSS Flexbox 생성기란 무엇인가요?

일반적인 사용 사례

자주 묻는 질문

관련 도구

색상 변환기 (HEX/RGB/HSL)

CSS Box Shadow 생성기

CSS 그라데이션 생성기

Cubic Bezier 가속 곡선 생성기

색상 팔레트 생성기

CSS Border Radius 생성기