Flexbox Playground 완벽 가이드
Flexbox Playground란 무엇인가요?
Flexbox Playground는 CSS의 Flexbox 레이아웃 시스템을 시각적으로 이해하고 실험할 수 있는 도구입니다. flex-direction, justify-content, align-items 등 다양한 속성을 조절하며 실시간으로 레이아웃 변화를 확인하고, 완성된 CSS 코드를 즉시 복사하여 사용할 수 있습니다. 복잡한 Flexbox 개념을 직관적으로 학습하고 실무에 적용할 수 있습니다.
Flexbox의 핵심 개념
Flexbox는 1차원 레이아웃 시스템으로, 주축(Main Axis)과 교차축(Cross Axis) 두 방향을 기반으로 작동합니다. • Container: display: flex가 적용된 부모 요소 • Items: Container 내부의 자식 요소들 • Main Axis: flex-direction으로 결정되는 주축 • Cross Axis: Main Axis에 수직인 교차축 이 개념을 이해하면 justify-content(주축 정렬)와 align-items(교차축 정렬)의 차이를 명확히 알 수 있습니다.
주요 속성 설명
• flex-direction: 아이템 배치 방향 (row/column) • flex-wrap: 아이템 래핑 (nowrap/wrap) • justify-content: 주축을 따른 정렬 (flex-start, center, space-between) • align-items: 교차축을 따른 정렬 (stretch, center, baseline) • align-content: 여러 줄일 때의 정렬 (wrap일 때만 적용) • gap: 아이템 간 간격 (margin 대체)
사용 방법
1단계: 프리셋 탭에서 자주 사용되는 레이아웃 패턴을 선택하거나 커스텀 탭에서 직접 설정합니다. 2단계: flex-direction으로 방향을 결정합니다 (가로=Row, 세로=Column). 3단계: justify-content로 주축 정렬을 조절합니다. 4단계: align-items로 교차축 정렬을 조절합니다. 5단계: 필요시 flex-wrap과 gap을 조절합니다. 6단계: 미리보기에서 확인 후 CSS 코드를 복사합니다.
자주 사용되는 레이아웃 패턴
• Horizontal Center(가로 중앙): justify-content: center, align-items: center • Vertical Center(세로 중앙): flex-direction: column 후 동일 • Navbar(네비게이션): justify-content: space-between, align-items: center • Grid(그리드): flex-wrap: wrap, gap 사용 • Sidebar + Content: flex-direction: column (모바일) → row (데스크톱) 반응형
활용 사례
• 네비게이션 바와 헤더 레이아웃 • 카드 그리드와 이미지 갤러리 • 모달과 팝업 중앙 정렬 • 폼 요소 수직/수평 정렬 • 반응형 레이아웃 (모바일→데스크톱) • 푸터와 사이드바 레이아웃 • 탭 메뉴와 버튼 그룹
Frequently Asked Questions (FAQ)
- Q. Flexbox와 Grid의 차이는 무엇인가요?
- A. Flexbox는 1차원(한 방향) 레이아웃에 적합하고, CSS Grid는 2차원(행+열) 레이아웃에 적합합니다. 간단한 정렬은 Flexbox를, 복잡한 그리드는 Grid를 사용하는 것이 좋습니다.
- Q. justify-content와 align-items의 차이가 무엇인가요?
- A. justify-content는 주축(Main Axis, flex-direction 방향)을 따라 정렬하고, align-items는 교차축(Cross Axis, 수직 방향)을 따라 정렬합니다. flex-direction이 row면 justify-content가 가로, align-items가 세로 정렬을 담당합니다.
- Q. align-content가 비활성화되어 있어요.
- A. align-content는 flex-wrap: wrap일 때만 작동합니다. 여러 줄이 있을 때 줄 간격을 조절하는 속성입니다. nowrap일 때는 align-items를 사용하세요.
- Q. 브라우저 호환성은 어떤가요?
- A. Flexbox는 모든 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 완벽하게 지원됩니다. IE11도 부분적으로 지원하지만, prefix(-ms-)가 필요할 수 있습니다.