Flexbox 플레이그라운드

📋 포맷/변환

Flexbox 속성을 슬라이더로 조절하며 실시간 결과를 눈으로 확인합니다.

컨테이너 설정

flex-direction

justify-content

align-items

flex-wrap

gap: 8px

미리보기

아이템을 클릭하여 개별 속성을 수정하세요

아이템 선택

미리보기에서 아이템을 클릭하면 개별 속성을 수정할 수 있습니다.

CSS 코드

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

📦 Flexbox Playground란?

CSS Flexbox 속성을 슬라이더로 조절하며 즉시 결과를 보는 인터랙티브 도구입니다. flex-direction, justify-content, align-items와 아이템의 flex-grow, 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 순서와 다른 시각적 순서 적용

💡 언제 Flex, 언제 Grid?

1차원 정렬(네비게이션 바, 카드 한 줄)은 Flexbox, 2차원 레이아웃(전체 페이지 그리드)은 CSS Grid가 정답입니다. 억지로 한쪽으로 통일하면 코드가 복잡해집니다.

자주 묻는 질문

Flexbox와 Grid의 차이점은 무엇인가요?▼

Flexbox는 1차원(행 또는 열) 레이아웃에 적합하고, Grid는 2차원(행과 열 동시) 레이아웃에 적합합니다. 네비게이션 바는 Flexbox, 전체 페이지 레이아웃은 Grid가 더 적합한 경우가 많습니다.

flex-grow와 flex-shrink의 차이는 무엇인가요?▼

flex-grow는 여유 공간이 있을 때 아이템이 늘어나는 비율, flex-shrink는 공간이 부족할 때 아이템이 줄어드는 비율을 결정합니다.

align-content는 언제 사용하나요?▼

flex-wrap: wrap 상태에서 여러 줄이 생겼을 때, 줄 간의 간격과 정렬을 조절합니다. 한 줄일 때는 효과가 없습니다.