CSS Flexbox란?
CSS Flexbox(유연한 박스 레이아웃)는 컨테이너 내 아이템 간에 공간을 분배하는 1차원 레이아웃 모델입니다. 주축과 교차축을 따라 아이템의 정렬, 순서, 크기 조정을 단순화하여 float나 포지셔닝 해킹 없이 반응형 레이아웃을 쉽게 만들 수 있습니다.
주요 Flexbox 속성
- flex-direction: 주축을 정의합니다 (행, 열 또는 역순).
- flex-wrap: 아이템이 새 줄로 줄바꿈되는지 제어합니다.
- justify-content: 주축을 따라 아이템을 정렬합니다.
- align-items: 교차축을 따라 아이템을 정렬합니다.
- gap: 마진 없이 플렉스 아이템 간 간격을 설정합니다.
자주 묻는 질문
Flexbox와 Grid 중 언제 사용해야 하나요?
Flexbox는 1차원 레이아웃(한 줄 또는 한 열의 아이템)에 사용합니다. CSS Grid는 행과 열을 동시에 제어해야 하는 2차원 레이아웃에 사용합니다.
Flexbox는 모든 브라우저에서 지원되나요?
네. CSS Flexbox는 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저에서 지원됩니다. 현재 구현에서는 벤더 프리픽스가 필요하지 않습니다.