Flexbox 플레이그라운드
CSS Flexbox를 시각적으로 실험하고 코드를 생성하세요.
1
2
3
컨테이너
8px
CSS
/* Container */ display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
Flexbox 플레이그라운드 안내
CSS Flexbox 레이아웃을 시각적으로 실험할 수 있는 무료 인터랙티브 도구입니다. 컨테이너와 아이템 속성을 조절하며 실시간으로 결과를 확인하세요.
기능
- flex-direction, justify-content, align-items, flex-wrap, gap 컨테이너 속성
- 아이템별 flex-grow, flex-shrink, flex-basis, align-self, order 조절
- 아이템 추가/제거
- 실시간 시각적 미리보기
- CSS 코드 자동 생성 + 원클릭 복사
Related Tools
🎨Color Picker
HEX, RGB, HSL converter🌈CSS Gradient
Visual gradient builder🎨Color Palette
Color harmony generator✏️SVG Editor
Edit & optimize SVG