10분 만에 마스터하는 CSS Flexbox! 복잡한 레이아웃도 쉽게 해결하는 비밀

Flexbox란?

Flexbox(Flexible Box Layout Module)는 CSS3에서 소개된 현대적인 레이아웃 모델입니다. 기존의 float나 positioning과 같은 레이아웃 방식의 한계를 극복하고, 더 효율적이고 예측 가능한 방식으로 요소를 배치할 수 있게 설계되었습니다.

Flexbox는 크게 두 가지 개념으로 나뉩니다:

• Flex Container: Flexbox 레이아웃을 적용할 부모 요소
• Flex Items: Flex Container 내부의 자식 요소들

.container {
  display: flex; /* 또는 display: inline-flex; */
}

위 코드처럼 display: flex를 설정하면 해당 요소는 Flex Container가 되며, 자식 요소들은 자동으로 Flex Items가 됩니다.

Flexbox 기본 개념

Flexbox를 이해하기 위한 핵심 용어들:

• 주축(Main Axis): Flex Items가 배치되는 기본 축
• 교차축(Cross Axis): 주축에 수직인 축
• 시작점(Main Start/Cross Start): Flex Items가 배치되기 시작하는 지점
• 끝점(Main End/Cross End): Flex Items 배치가 끝나는 지점
• 크기(Main Size/Cross Size): Flex Item의 주축/교차축 방향으로의 크기

Container 속성

1. flex-direction

주축의 방향을 결정합니다.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row: 가로 방향 (기본값)
• row-reverse: 가로 방향 역순
• column: 세로 방향
• column-reverse: 세로 방향 역순

2. flex-wrap

Flex Items가 한 줄에 들어가지 않을 때 줄바꿈 여부를 결정합니다.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap: 줄바꿈 없음 (기본값)
• wrap: 여러 줄로 나눔
• wrap-reverse: 여러 줄로 나누고 역순으로 배치

3. flex-flow

flex-direction과 flex-wrap의 단축 속성입니다.

.container {
  flex-flow: row wrap; /* flex-direction과 flex-wrap 합쳐서 사용 */
}

4. justify-content

주축을 기준으로 Flex Items를 정렬합니다.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start: 시작점 정렬 (기본값)
• flex-end: 끝점 정렬
• center: 가운데 정렬
• space-between: 첫 항목은 시작점, 마지막 항목은 끝점에 정렬되고 나머지 항목은 균등 분포
• space-around: 모든 항목이 균등한 여백을 갖도록 분포
• space-evenly: 모든 여백이 동일하게 분포

5. align-items

교차축을 기준으로 Flex Items를 정렬합니다.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

• stretch: 컨테이너를 채우기 위해 늘림 (기본값)
• flex-start: 교차축의 시작점 정렬
• flex-end: 교차축의 끝점 정렬
• center: 교차축의 가운데 정렬
• baseline: 텍스트 기준선 정렬

6. align-content

여러 줄의 Flex Items가 있을 때 교차축 상에서의 정렬을 결정합니다.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• stretch: 컨테이너를 채우기 위해 늘림 (기본값)
• flex-start: 교차축의 시작점 정렬
• flex-end: 교차축의 끝점 정렬
• center: 교차축의 가운데 정렬
• space-between: 첫 줄은 시작점, 마지막 줄은 끝점에 정렬되고 나머지 줄은 균등 분포
• space-around: 모든 줄이 균등한 여백을 갖도록 분포

Item 속성

1. order

Flex Item의 순서를 변경할 수 있습니다. 기본값은 0이며, 숫자가 작을수록 앞에 배치됩니다.

.item {
  order: 1; /* 기본값은 0 */
}

2. flex-grow

Flex Item이 필요에 따라 늘어나는 비율을 지정합니다. 기본값은 0입니다.

.item {
  flex-grow: 1; /* 기본값은 0 */
}

값이 0이면 늘어나지 않고, 양수값은 해당 비율만큼 남은 공간을 차지합니다.

3. flex-shrink

Flex Item이 필요에 따라 줄어드는 비율을 지정합니다. 기본값은 1입니다.

.item {
  flex-shrink: 1; /* 기본값은 1 */
}

값이 0이면 줄어들지 않고, 양수값은 해당 비율만큼 줄어듭니다.

4. flex-basis

Flex Item의 기본 크기를 지정합니다. 기본값은 auto입니다.

.item {
  flex-basis: auto | <length>;
}

• auto: 내용물의 크기에 따라 결정
• <length>: px, em, % 등의 단위로 지정

5. flex

flex-grow, flex-shrink, flex-basis의 단축 속성입니다.

.item {
  flex: 0 1 auto; /* flex-grow flex-shrink flex-basis */
}

자주 사용되는 값:

• flex: 1: flex: 1 1 0%와 동일
• flex: auto: flex: 1 1 auto와 동일
• flex: none: flex: 0 0 auto와 동일
• flex: 0 auto: flex: 0 1 auto와 동일

6. align-self

개별 Flex Item의 교차축 정렬을 오버라이드합니다.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Flexbox 활용 사례

1. 가운데 정렬

요소를 수평 및 수직 가운데 정렬하는 가장 쉬운 방법입니다.

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

2. 내비게이션 바

반응형 내비게이션 바를 쉽게 만들 수 있습니다.

nav {
  display: flex;
  justify-content: space-between;
}

.nav-links {
  display: flex;
  gap: 20px;
}

/* 모바일 화면에서는 방향 전환 */
@media (max-width: 768px) {
  nav {
    flex-direction: column;
  }
}

3. 카드 레이아웃

동일한 높이의 카드 그리드를 만들 수 있습니다.

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

.card-content {
  flex-grow: 1; /* 내용이 적어도 카드 높이 유지 */
}

Flexbox vs Grid

Flexbox와 CSS Grid는 모두 현대적인 레이아웃 시스템이지만 각각 다른 용도에 적합합니다:

• Flexbox: 1차원 레이아웃에 최적화 (행 또는 열 중 하나의 방향)
• Grid: 2차원 레이아웃에 최적화 (행과 열 모두)

일반적으로:

• 단일 행이나 열의 요소를 정렬할 때는 Flexbox
• 행과 열이 모두 있는 그리드 레이아웃에는 Grid

브라우저 호환성

Flexbox는 모든 현대 브라우저에서 잘 지원됩니다:

• Chrome 29+
• Firefox 22+
• Safari 6.1+
• Edge 12+
• iOS Safari 7.1+
• Android Browser 4.4+

Internet Explorer 11에서는 부분적으로 지원되며, 일부 버그가 있을 수 있습니다.

자주 묻는 질문

Q: Flexbox에서 요소 간 간격을 주는 가장 좋은 방법은?

A: 최신 브라우저에서는 gap 속성을 사용하는 것이 가장 좋습니다:

.container {
  display: flex;
  gap: 20px;
}

오래된 브라우저에서는 margin을 사용해야 할 수 있습니다.

Q: Flex Item을 특정 너비로 제한하려면?

A: min-width, max-width와 함께 flex-basis를 사용하세요:

.item {
  flex: 1 1 300px;
  max-width: 500px;
}

Q: 특정 Flex Item만 다른 정렬을 갖게 하려면?

A: 해당 아이템에 align-self 속성을 사용하세요:

.special-item {
  align-self: flex-end;
}

---

Flexbox는 학습 곡선이 있지만, 일단 마스터하면 레이아웃 구성이 훨씬 쉬워집니다. 실험하고 다양한 속성을 조합해보면서 Flexbox의 잠재력을 최대한 활용해보세요!