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는 요소 높이 동일화에 효과적