CSS Flex Container 요약
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 개발자 및 CSS 학습자
- 중급 이상의 난이도 (Flexbox 개념 이해가 필요)
핵심 요약
flex-direction
:row
,column
,row-reverse
,column-reverse
값으로 요소의 배치 방향을 설정 (예:.flex-container { display: flex; flex-direction: row; }
)justify-content
:center
,space-between
,space-around
등으로 주축(가로) 축의 정렬을 조절 (예:.flex-container { justify-content: space-between; }
)align-items
:center
,stretch
,flex-start
등으로 교차축(세로) 축의 정렬을 조절 (예:.flex-container { align-items: center; }
)
섹션별 세부 요약
1. Flex Container의 주요 속성
flex-direction
속성은 요소의 배치 방향을 결정하며, 기본값은row
(좌측에서 우측으로 수평 배치)flex-wrap
속성은 요소가 한 줄에만 배치되는지 (nowrap
) 또는 여러 줄로 감싸는지 (wrap
,wrap-reverse
) 설정flex-flow
는flex-direction
과flex-wrap
의 단축 속성 (예:.flex-container { flex-flow: row wrap; }
)
2. justify-content 속성
center
: 요소를 컨테이너 중앙에 배치flex-start
: 기본값, 요소를 컨테이너 시작점에 배치space-between
: 요소 사이에 간격을 두고 배치 (가장자리 요소는 컨테이너 경계에 붙음)space-around
: 요소 주변에 균일한 간격을 두고 배치
3. align-items 속성
center
: 요소를 컨테이너 수직 중앙에 배치flex-start
: 요소를 컨테이너 상단에 배치flex-end
: 요소를 컨테이너 하단에 배치stretch
: 요소를 컨테이너 높이에 맞게 늘림 (기본값)baseline
: 요소의 기준선을 기준으로 정렬
결론
- Flexbox 레이아웃 구축 시
flex-direction
과justify-content
,align-items
를 조합하여 유연한 배치를 실현 flex-flow
는flex-direction
과flex-wrap
의 단축 속성을 사용해 코드를 간결하게 작성justify-content: space-between
은 요소 간격을 균일하게 배치하는 데 유용하며,align-items: stretch
는 요소 높이 동일화에 효과적