AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

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-flowflex-directionflex-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-directionjustify-content, align-items를 조합하여 유연한 배치를 실현
  • flex-flowflex-directionflex-wrap의 단축 속성을 사용해 코드를 간결하게 작성
  • justify-content: space-between은 요소 간격을 균일하게 배치하는 데 유용하며, align-items: stretch는 요소 높이 동일화에 효과적