Skip to content

CSS Flexbox 레이아웃 치트 시트

Flexbox(유연한 박스) 레이아웃 모델은 컨테이너 내 항목의 크기가 불분명하거나 동적인 경우에도 항목을 정렬하고 공간을 효율적으로 배분하는 방법을 제공합니다.

컨테이너 속성 (Flex Container)

Set on parent: display: flex; or display: inline-flex;

속성 설명 주요 값
flex-direction 주축 방향 row, row-reverse, column, column-reverse
flex-wrap 줄 바꿈 여부 nowrap, wrap, wrap-reverse
flex-flow 방향과 줄 바꿈의 단축 표기 row wrap
justify-content 주축에서의 정렬 방식 flex-start, flex-end, center, space-between, space-around
align-items 교차축에서의 정렬 방식 flex-start, flex-end, center, baseline, stretch
align-content 여러 줄이 생겼을 때 교차축 정렬 flex-start, flex-end, center, space-between, stretch

아이템 속성 (Flex Items)

Set on children:

속성 설명 기본값
order 배치 순서 (값이 작을수록 앞으로) 0
flex-grow 확대 비율 (공간이 충분할 때) 0
flex-shrink 축소 비율 (공간이 부족할 때) 1
flex-basis 공간 배분 전의 기본 크기 auto
flex grow, shrink, basis의 단축 표기 0 1 auto
align-self 특정 항목만 다른 정렬 방식 적용 auto

핵심 개념

  • 주축 (Main Axis): 기본적으로 가로 방향이며, flex-direction에 의해 결정됩니다.
  • 교차축 (Cross Axis): 주축에 수직인 방향.

활용 예시

가로 세로 중앙 정렬 

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

균등 너비 배분 

.item {
  flex: 1; /* 남은 공간을 균등하게 차지 */
}

양 끝 정렬 

.navbar {
  display: flex;
  justify-content: space-between;
}