CSS Flexbox란 무엇인가?
Flexbox(Flexible Box) 레이아웃 모듈은 웹 페이지에서 유연하고 반응형인 레이아웃을 손쉽게 설계할 수 있도록 도와주는 CSS3의 핵심 기술입니다. 기존의 float나 position 방식보다 직관적이며, 복잡한 정렬과 배치를 몇 줄의 코드만으로 구현할 수 있습니다.
Flexbox는 크게 두 가지 요소로 구성됩니다.
- 플렉스 컨테이너(Flex Container): 플렉스 아이템들을 감싸는 부모 요소
- 플렉스 아이템(Flex Items): 컨테이너 안에 배치되는 자식 요소들
플렉스 컨테이너의 주요 속성
컨테이너에는 다음과 같은 속성을 사용하여 자식 요소들의 배치 방식을 제어할 수 있습니다.
1. flex-direction
플렉스 아이템이 배치되는 주축(main axis)의 방향을 설정합니다.
row(기본값): 가로 방향으로 배치row-reverse: 가로 반대 방향으로 배치column: 세로 방향으로 배치column-reverse: 세로 반대 방향으로 배치
2. flex-wrap
플렉스 아이템이 한 줄에 담기지 않을 때 줄바꿈 여부를 결정합니다.
nowrap(기본값): 줄바꿈 없이 한 줄에 배치wrap: 여러 줄로 줄바꿈wrap-reverse: 역방향으로 여러 줄 배치
3. flex-flow
flex-direction과 flex-wrap을 한 번에 지정할 수 있는 단축 속성(shorthand)입니다.
예시: flex-flow: row wrap;
4. justify-content
주축 방향에서 플렉스 아이템들의 수평 정렬 방식을 설정합니다.
flex-start(기본값): 시작점 기준 정렬flex-end: 끝점 기준 정렬center: 가운데 정렬space-between: 아이템 사이에 균등한 간격space-around: 아이템 주변에 균등한 간격
5. align-items
교차축(cross axis) 방향에서 플렉스 아이템들의 수직 정렬 방식을 설정합니다.
stretch(기본값): 컨테이너 높이만큼 늘어남flex-start: 상단 기준 정렬flex-end: 하단 기준 정렬center: 수직 가운데 정렬baseline: 텍스트 기준선에 맞춰 정렬
6. align-content
플렉스 아이템이 여러 줄로 배치되었을 때, 줄 전체의 정렬 방식을 교차축 방향으로 설정합니다. flex-wrap: wrap;일 때만 적용됩니다.
stretch,flex-start,flex-end,center,space-between,space-around등의 값을 사용합니다.
마무리
Flexbox는 현대 웹 디자인에서 필수적인 레이아웃 도구입니다. 위 속성들을 조합하면 네비게이션 바, 카드 목록, 중앙 정렬 콘텐츠 등 다양한 반응형 레이아웃을 간편하게 구현할 수 있습니다.