CSS Flexbox 컨테이너 및 아이템 속성 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 개발자, 프론트엔드 엔지니어
- 난이도: 중급 (Flexbox 레이아웃 구현 기초 지식 필요)
핵심 요약
- Flexbox의 핵심 속성
flex-direction
: 컨테이너 내 아이템 배치 방향을row
,column
등으로 정의 (예:.container { display: flex; flex-direction: column; }
)justify-content
: 주축(메인 액스)에 대한 아이템 정렬 (space-between
,center
등)align-items
: 교차축에 대한 아이템 정렬 (stretch
,flex-end
등)- 아이템 속성 활용
order
: 아이템 순서 조정 (예:.item { order: 2; }
)flex-grow
/flex-shrink
: 공간 확장/축소 비율 조절 (예:flex-grow: 1;
)- 레이아웃 최적화 팁
gap
속성으로 아이템 간 간격 설정 (예:gap: 20px;
)flex-wrap
과 결합하여 반응형 레이아웃 구현
섹션별 세부 요약
1. Flexbox 구성 요소
- Flex Container
display: flex
또는inline-flex
속성으로 정의- 컨테이너에 적용되는 속성:
flex-direction
,flex-wrap
,justify-content
등 - Flex Items
- 컨테이너의 직접 자식 요소
- 아이템에 적용되는 속성:
order
,align-self
,flex-grow
등
2. 컨테이너 속성 설명
flex-direction
- 기본값:
row
(좌우로 배치) column
로 세로 배치 가능flex-wrap
wrap
으로 아이템이 여러 줄로 펼침wrap-reverse
로 역순 배치 가능justify-content
space-between
: 아이템을 양쪽 끝에 배치하고 중간 간격 적용center
: 중앙 정렬
3. 아이템 속성 활용 예시
order
- 숫자로 아이템 순서 조정 (예:
.item { order: 3; }
) align-self
flex-end
으로 교차축 기준 하단 정렬flex-grow
/flex-shrink
flex-grow: 2
로 공간 확장,flex-shrink: 0
로 축소 방지
4. 레이아웃 구현 팁
- 반응형 설계
flex-wrap
과gap
을 결합하여 다양한 화면 크기 대응- 속성 조합
flex-flow
로flex-direction
과flex-wrap
을 동시에 설정 (예:flex-flow: column wrap
)- 디버깅
- 브라우저 개발자 도구로 Flexbox 속성 시각화 및 실시간 조정
결론
- 핵심 팁:
gap
과flex-wrap
을 활용한 반응형 레이아웃 구현flex-grow
/flex-shrink
사용 시0
또는1
이상의 값을 고려해 과도한 확장/축소 방지align-content
와justify-content
를 조합해 복잡한 다중 줄 레이아웃 설계- 개발자 도구로 실시간으로 속성 테스트 및 조정