Flexbox 생성기

플렉스 방향, 감싸기, 정렬 및 정렬을 실험해 보세요. 항목 레이아웃 업데이트를 실시간으로 확인한 다음 컨테이너 CSS를 복사하세요.

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

플렉스 방향, 감싸기, 양쪽 정렬 및 정렬을 실험해 보세요. 레이아웃 업데이트를 실시간으로 확인하세요.
브라우저에서 실행됩니다.
무료로 사용 가능

사용 방법

플렉스 방향을 설정하고 래핑합니다.
내용 정당화 및 항목 정렬을 조정합니다.
Flexbox CSS를 복사합니다.

How this tool works

플렉스 방향을 설정하고 래핑합니다.
내용 정당화 및 항목 정렬을 조정합니다.
Flexbox CSS를 복사합니다.

Recommended settings

먼저 기본 옵션을 사용한 다음 필요한 경우 조정하세요.

Supported formats

Text / on-page input

File size and limits

매우 복잡한 다중 레이어 미리보기는 구형 휴대폰에서 느리게 느껴질 수 있습니다.

Privacy

색상 및 CSS 생성기는 브라우저에서 완전히 실행됩니다. 미리보기 및 변환에서는 스타일을 업로드하지 않습니다.

Common use cases

필요할 때마다 Flexbox Generator를 사용하세요. 플렉스 방향, 감싸기, 양쪽 정렬 및 정렬을 실험해 보세요. 레이아웃 업데이트를 실시간으로 확인하세요.

Troubleshooting

붙여넣은 후 미리보기가 다르게 보입니다.

페이지에 경쟁 CSS가 있는지 확인하세요(재설정, 상속된 색상). 먼저 생성된 규칙을 격리된 스타일시트에 복사합니다.

FAQ

내 CSS가 업로드되나요?

아니요. 생성기와 변환기는 실시간 미리보기를 통해 브라우저에서 실행됩니다.

계정이 필요합니까?

아니요. 도구를 열고 컨트롤을 조정한 후 CSS를 복사하세요.