컨테이너 설정
미리보기
1
2
3
아이템을 클릭하여 개별 속성을 수정하세요
아이템 선택
미리보기에서 아이템을 클릭하면 개별 속성을 수정할 수 있습니다.
CSS 코드
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
📦 Flexbox Playground란?
Flexbox Playground는 CSS Flexbox 레이아웃을 시각적으로 학습하고 실험할 수 있는 인터랙티브 도구입니다. 컨테이너의 flex-direction, justify-content, align-items 등 주요 속성과 개별 아이템의 flex-grow, flex-shrink, order 등을 실시간으로 조절하면서 각 속성이 레이아웃에 미치는 영향을 즉시 확인할 수 있습니다. 설정한 속성은 CSS 코드로 자동 생성되어 바로 복사해서 사용할 수 있습니다.
📋 주요 Flexbox 속성
| 속성 | 적용 대상 | 설명 |
|---|---|---|
| flex-direction | 컨테이너 | 주축 방향 (row, column) |
| justify-content | 컨테이너 | 주축 정렬 (start, center, space-between) |
| align-items | 컨테이너 | 교차축 정렬 (start, center, stretch) |
| flex-wrap | 컨테이너 | 줄바꿈 여부 (nowrap, wrap) |
| flex-grow | 아이템 | 남은 공간 배분 비율 |
| order | 아이템 | 배치 순서 변경 |
💡 Flexbox 활용 팁
- 중앙 정렬: justify-content: center + align-items: center로 완벽한 중앙 배치
- 균등 배분: space-between으로 첫/끝 요소를 양 끝에, 나머지를 균등 배치
- 반응형 그리드: flex-wrap: wrap + flex-basis로 자동 줄바꿈 그리드 구현
- 순서 변경: order 속성으로 HTML 순서와 다른 시각적 순서 적용
자주 묻는 질문
Flexbox와 Grid의 차이점은 무엇인가요?▼
Flexbox는 1차원(행 또는 열) 레이아웃에 적합하고, Grid는 2차원(행과 열 동시) 레이아웃에 적합합니다. 네비게이션 바는 Flexbox, 전체 페이지 레이아웃은 Grid가 더 적합한 경우가 많습니다.
flex-grow와 flex-shrink의 차이는 무엇인가요?▼
flex-grow는 여유 공간이 있을 때 아이템이 늘어나는 비율, flex-shrink는 공간이 부족할 때 아이템이 줄어드는 비율을 결정합니다.
align-content는 언제 사용하나요?▼
flex-wrap: wrap 상태에서 여러 줄이 생겼을 때, 줄 간의 간격과 정렬을 조절합니다. 한 줄일 때는 효과가 없습니다.