📦 CSS Flexbox

1. display: flex의 중요성

첫번째 기술 블로그의 주제를 Flexbox로 잡은 이유는 개발을 시작한지 이제 2개월 정도 된 시점에서 css 레이아웃을 구성할때 제일 많이 사용하게 되는 부분이기 때문에 이렇게 첫번째 주제로 가져오게 되었습니다.

display: flex는 웹 페이지에서 요소들을 정렬하고 배치하는 것은 매우 중요한 작업입니다.
이전에는 float, position, table 등을 사용하여 레이아웃을 구성했지만, 이러한 방법들은 복잡하고 유지보수가 어려웠습니다.
CSS Flexbox는 이러한 문제를 해결하기 위해 등장한 강력한 레이아웃 모델로, 요소들을 행(row)이나 열(column) 방향으로 유연하게 배치할 수 있게 해줍니다.

2. 언제 사용해야 할까? 장단점 비교

✅ 장점

수평 및 수직 정렬이 쉬워짐: align-items, justify-content 속성으로 간단하게 정렬 가능.
반응형 레이아웃 구현 용이: 화면 크기에 따라 요소의 크기나 배치가 자동으로 조정됨.
복잡한 레이아웃도 간단하게 구성 가능: 여러 개의 요소를 정렬할 때 코드가 간결해짐.

❌ 단점

2D 레이아웃에는 한계: 복잡한 그리드 레이아웃에는 CSS Grid가 더 적합.
구형 브라우저 지원 문제: 구형 브라우저에서는 지원하지 않거나 제한적으로 지원됨.

3. Flexbox의 주요 속성

🔹 display: flex; – Flex 컨테이너 만들기

.container {
  display: flex;
}

이렇게 설정하면 .container는 Flex 컨테이너가 되어 내부의 모든 자식 요소들이 Flex 아이템이 됩니다.

🔹 flex-direction – 주축 방향 설정

.container {
  flex-direction: row; /* 기본값, 수평 배치 */
  flex-direction: column; /* 수직 배치 */
}

🔹 justify-content – 주축 정렬

.container {
  justify-content: flex-start; /* 기본값, 왼쪽 정렬 */
  justify-content: center; /* 가운데 정렬 */
  justify-content: space-between; /* 양 끝 정렬 */
}

🔹 align-items – 교차축 정렬

.container {
  align-items: stretch; /* 기본값, 높이 맞추기 */
  align-items: center; /* 수직 가운데 정렬 */
}

🔹 align-self – 개별 아이템의 교차축 정렬

.item {
  align-self: flex-start; /* 위쪽 정렬 */
  align-self: center; /* 수직 가운데 정렬 */
}

4. 자주 헷갈리는 부분 정리

🔍 flex: 1의 의미

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

flex: 1은 위와 같이 해석됩니다. 즉, 아이템은 동일한 비율로 공간을 차지하며, 기본 크기는 0으로 설정됩니다.

🔄 flex-grow, flex-shrink, flex-basis의 차이점

flex-grow: 남는 공간을 얼마나 차지할지 결정합니다.
flex-shrink: 공간이 부족할 때 얼마나 줄어들지 결정합니다.
flex-basis: 아이템의 초기 크기를 설정합니다.

.item {
  flex-grow: 2; /* 남는 공간의 2배 차지 */
  flex-shrink: 1; /* 공간 부족 시 1배 줄어듦 */
  flex-basis: 100px; /* 초기 크기 100px */
}

🧱 flex-direction의 row와 column 차이

row: 기본값으로, 아이템들이 수평으로 배치됩니다.
column: 아이템들이 수직으로 배치됩니다.

.container {
  flex-direction: row; /* 수평 배치 */
  flex-direction: column; /* 수직 배치 */
}

5. Flexbox 심화

🔹 자동 정렬 vs 개별 정렬

justify-content / align-items → 컨테이너 단위 정렬
align-self → 특정 아이템 개별 정렬

.item:nth-child(2) {
  align-self: flex-start;
}

🔹 주축(main axis) vs 교차축(cross axis)

flex-direction에 따라 주축과 교차축 방향이 달라짐

.container {
  display: flex;
  flex-direction: column; /* 주축: 수직, 교차축: 수평 */
  justify-content: center;
  align-items: flex-start;
}

🔹 flex-grow / flex-shrink / flex-basis 활용

남는 공간 배분, 공간 부족 시 줄어드는 비율, 기본 크기 설정
실무 카드/메뉴바 레이아웃에 유용

.item {
  flex: 2 0 150px; /* grow 2, shrink 0, basis 150px */
}

🔹 독립적인 아이템 배치

margin: auto 활용 → 특정 아이템 밀기
중첩 Flex 컨테이너 활용

.item.center {
  margin: 0 auto;
}

🔹 멀티라인 레이아웃

flex-wrap: wrap + gap 활용
카드, 태그, 버튼 그룹 등에서 사용

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

6. 예제: Flexbox를 활용한 레이아웃 구성

기본 예제

<div class="container">
  <div class="item">아이템 1</div>
  <div class="item">아이템 2</div>
  <div class="item">아이템 3</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  text-align: center;
}

위 코드를 VSC에 복사 붙여넣기를 하고 확인을 하시면, 3개의 아이템을 수평으로 배치하고,
각 아이템 사이에 동일한 간격을 두며, 수직으로 가운데 정렬하는 기본 예제입니다.

심화 예제

<div class="container">
  <div class="item">Item 1</div>
  <div class="item grow">Item 2</div>
  <div class="item small">Item 3</div>
  <div class="item center">Center</div>
  <div class="item wrap">Wrap 1</div>
  <div class="item wrap">Wrap 2</div>
  <div class="item wrap">Wrap 3</div>
</div>

.container {
  display: flex;
  flex-direction: row; /* 주축: 수평 */
  flex-wrap: wrap; /* 여러 줄 가능 */
  justify-content: space-between; /* 주축 중앙 & 양 끝 */
  align-items: center; /* 교차축: 수직 중앙 */
  gap: 10px; /* 아이템 간격 */
}

/* 기본 아이템 스타일 */
.item {
  background-color: #4caf50;
  color: white;
  text-align: center;
  padding: 10px;
  flex-basis: 100px; /* 초기 크기 */
}

/* flex-grow 사용 */
.item.grow {
  flex-grow: 2; /* 남는 공간 2배 차지 */
}

/* flex-shrink 사용 */
.item.small {
  flex-shrink: 0; /* 공간 부족해도 줄어들지 않음 */
  width: 50px;
}

/* align-self 개별 아이템 정렬 */
.item.center {
  align-self: flex-start; /* 교차축 상단 정렬 */
  margin: 0 auto; /* 주축 중앙 배치 */
}

/* wrap된 아이템 스타일 */
.item.wrap {
  flex: 1 1 80px; /* grow 1, shrink 1, basis 80px */
  background-color: #ff5722;
}

위 코드를 VSC에 복사 붙여넣기를 하고 확인을 하시면:

주축 / 교차축

.container는 flex-direction: row → 수평이 주축
align-items: center → 교차축(수직) 중앙 정렬

flex-grow / flex-shrink / flex-basis

Item 2는 남는 공간을 더 차지 (flex-grow: 2)
Item 3은 공간 부족해도 줄어들지 않음 (flex-shrink: 0)
각 아이템 초기 크기는 flex-basis로 설정

개별 아이템 정렬

.center 아이템은 교차축 상단에 위치 (align-self: flex-start)
동시에 주축 중앙 정렬 (margin: 0 auto)

멀티라인 레이아웃

.wrap 아이템은 flex-wrap: wrap 덕분에 화면 크기 따라 줄 바꿈
flex: 1 1 80px→ 자동으로 크기 조절

7. 추가 학습 자료

CSS Flexbox Layout Guide
(시각적 이해를 돕는 예제가 많습니다.)
MDN Flexbox 공식 문서
Flexbox Froggy 게임
(간단한 게임을 통해 Flexbox를 학습할 수 있습니다.)

8. Oneul Code를 정리하며…

오늘 Flexbox에 대해서 학습하고 블로그 게시물을 작성하면서 직접 코드를 작성하고 글을 써보니,
개발할때마다 헷갈리던 flex: 1(grow/shrink/basis)와 주축/교차축 개념이 훨씬 머릿속에 잘 정리되었습니다.

Oneul Code는 오늘 학습한 내용을 기록하면서, 이 글을 읽는 여러분도 바로 활용할 수 있기를 바랍니다.

Oneul Code - 01.display: flex