CSS Flex: 유연한 레이아웃의 시작

CSS Flexbox(Flexible Box Module)는 현대 웹 레이아웃에서 가장 강력하고 유용한 도구 중 하나입니다. 복잡한 레이아웃도 간단하게 구현할 수 있게 해주는 Flex에 대해 자세히 알아보겠습니다.

 

Flex란?

Flex는 요소들을 행과 열 형태로 배치하고 정렬하는 1차원 레이아웃 모델입니다. 기존의 float나 positioning보다 훨씬 직관적이고 유연한 방식으로 요소들을 배치할 수 있습니다.

Flex 컨테이너 설정하기

Flex를 사용하려면 먼저 부모 요소를 Flex 컨테이너로 설정해야 합니다:

.container {
  display: flex;
}

 

주요 속성 살펴보기

flex-direction

컨테이너 내 요소들의 배치 방향을 결정합니다.

.container {
  flex-direction: row; /* 기본값 - 가로 방향 */
  flex-direction: column; /* 세로 방향 */
  flex-direction: row-reverse; /* 가로 역방향 */
  flex-direction: column-reverse; /* 세로 역방향 */
}

 

 

justify-content

주 축(main axis)을 따라 요소들을 정렬합니다.

.container {
  justify-content: flex-start; /* 시작점 정렬 */
  justify-content: center; /* 중앙 정렬 */
  justify-content: flex-end; /* 끝점 정렬 */
  justify-content: space-between; /* 양끝 정렬 */
  justify-content: space-around; /* 균등 간격 */
}

align-items

교차 축(cross axis)을 따라 요소들을 정렬합니다.

.container {
  align-items: stretch; /* 기본값 - 늘이기 */
  align-items: flex-start; /* 위쪽 정렬 */
  align-items: center; /* 중앙 정렬 */
  align-items: flex-end; /* 아래쪽 정렬 */
}

Flex 아이템 속성

flex-grow

아이템의 증가 비율을 설정합니다.

.item {
  flex-grow: 0; /* 기본값 - 증가하지 않음 */
  flex-grow: 1; /* 남은 공간을 1의 비율로 차지 */
}

flex-shrink

아이템의 감소 비율을 설정합니다.

.item {
  flex-shrink: 1; /* 기본값 - 축소됨 */
  flex-shrink: 0; /* 축소되지 않음 */
}

flex-basis

아이템의 기본 크기를 설정합니다.

.item {
  flex-basis: auto; /* 기본값 */
  flex-basis: 200px; /* 기본 크기 지정 */
}

 

예시

/* 중앙 정렬된 네비게이션 바 */
.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* 반응형 카드 레이아웃 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;
}