Developer Layout Utility

Flexbox Playground

justify-content, align-items, flex-direction, gap 등의 Flexbox 속성을 실시간으로 테스트하고 CSS 코드를 바로 복사할 수 있습니다.

실시간 Flexbox 미리보기 속성 변경 시 즉시 레이아웃 반영

CSS 자동 생성 현재 Flexbox 설정을 코드로 출력

레이아웃 학습용 justify-content와 align-items 차이 확인

Flexbox 설정

Flex 컨테이너 속성을 변경하며 레이아웃을 테스트하세요.

flex-direction

justify-content

align-items

flex-wrap

gap

0px 16px 60px

container padding

0px 24px 60px

item count

2 5개 12

container height

240px 420px 700px

Live Preview

Direction row

Gap 16px

Wrap nowrap

현재 Flexbox 설정 기준 CSS 코드입니다.

대기 중

Flexbox 설정을 변경한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.

Flexbox 속성을 실시간으로 테스트할 수 있는 레이아웃 실습 도구입니다. justify-content, align-items, gap, wrap 동작을 바로 확인할 수 있습니다.