Flexbox 레이아웃 가이드: 개념 및 10가지 실무 사례
Source
Evernote/Technote scraps/flexbox로 만들 수 있는 10가지 레이아웃.md
Summary
본문서는 CSS3 Flexbox의 기본 개념(Container/Item 구분, 주축 방향)과 브라우저 지원 현황을 설명하며, 기존 CSS(float, position)로 구현이 복잡했던 10가지 실무 레이아웃을 Flexbox로 구현하는 방법을 소개합니다. 주요 사례로는 스크롤 없는 100% 높이 레이아웃, 고정 푸터, 수직 중앙 정렬, 유동 너비 박스, 반응형 비율 유지 등이 포함됩니다. 특히 flex-direction, flex-grow/shrink/basis 속성의 동작 원리를 통해 복잡한 계산 없이 유연한 배치가 가능함을 강조합니다.
Key Points
- Flexbox는 뷰포트나 요소 크기가 동적으로 변할 때 효율적인 배치, 정렬, 분산을 제공하는 CSS3 레이아웃 방식입니다.
- 구조는
display: flex를 적용한 부모(Flex Container)와 자식(Flex Item)으로 구성되며, 속성은 부모(정렬/흐름)와 자식(크기/순서)로 명확히 구분됩니다. - 주축 방향은
flex-direction으로 제어하며, 기본값은 수평(row)이고 수직(column)으로 변경 가능합니다. - 실무 적용 사례 10가지: 1) 스크롤 없는 100% 레이아웃, 2) 내비게이션 영역, 3) 스티키 푸터, 4) 정렬이 다른 메뉴, 5) 폼 레이블 수직 중앙 정렬, 6) 중앙 정렬 아이콘, 7) 유동 너비 박스, 8) 말줄임과 아이콘, 9) 위아래로 흐르는 목록, 10) 가로세로 비율 유지 반응형 박스.
- 브라우저 지원: 모바일 브라우저는 거의 완벽히 지원하나, IE10/11은 부분적 지원 및 버그 존재로 PC 서비스 적용 시 주의가 필요합니다.