[CSS] Flexbox 완벽 가이드

---

0. 먼저 읽어보기

 

CSS Layout Method

[CSS] CSS 레이아웃(Layout) 기법 정리

 

HTML Layout Structure

[HTML] HTML 레이아웃(Layout) 개념과 구조 + flexbox, grid, 미디어 쿼리

 

 

 

---

Flexbox(Flexible Box)는 CSS 레이아웃을 구성하는 방법 중 하나로, 요소들을 유연하게 정렬하고 배치하는 데 최적화된 도구입니다. 주로 1차원(가로 또는 세로 방향) 레이아웃을 다룰 때 유용합니다.

 

 

 

---

1. Flexbox 개념 및 기본 구조

 

1) Flex 컨테이너와 Flex 아이템

• Flex 컨테이너(Flex Container): display: flex;를 선언한 부모 요소.

• Flex 아이템(Flex Items): Flex 컨테이너 내부에 포함된 자식 요소들.

.container {
  display: flex;
}

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

 

 

 

---

2. Flexbox의 주요 속성들

 

1) 컨테이너 관련 속성 (부모 요소)

컨테이너가 아이템을 어떻게 배치하고 정렬할지를 결정하는 속성들입니다.

 

✅ (1) display: flex;

컨테이너를 Flexbox로 만듭니다.

.container {
  display: flex;
}

---

✅ (2) flex-direction (주축 방향 설정)

Flex 아이템이 배치될 방향을 설정합니다.

기본값은 row(가로 정렬)입니다.

속성값	설명
row	기본값. 왼쪽 → 오른쪽 (수평 정렬)
row-reverse	오른쪽 → 왼쪽 (수평 반전)
column	위 → 아래 (수직 정렬)
column-reverse	아래 → 위 (수직 반전)

.container {
  display: flex;
  flex-direction: row; /* 기본값 */
}

---

✅ (3) justify-content (주축 정렬)

아이템을 주축(Main Axis) 방향으로 정렬하는 속성입니다.

속성값	설명
flex-start	기본값. 왼쪽 정렬 (row), 위쪽 정렬 (column)
flex-end	오른쪽 정렬 (row), 아래쪽 정렬 (column)
center	가운데 정렬
space-between	양 끝 정렬, 아이템 사이 동일한 간격
space-around	아이템 주위에 동일한 간격 (양쪽 여백 포함)
space-evenly	모든 간격을 동일하게 배치

.container {
  display: flex;
  justify-content: center;
}

---

✅ (4) align-items (교차축 정렬)

아이템을 교차축(Cross Axis) 방향으로 정렬하는 속성입니다.

속성값	설명
flex-start	위쪽 정렬 (row 기준)
flex-end	아래쪽 정렬
center	가운데 정렬
stretch	높이(또는 너비)를 컨테이너에 맞춤 (기본값)
baseline	텍스트 기준선에 맞춤

.container {
  display: flex;
  align-items: center;
}

---

✅ (5) align-content (여러 행의 정렬)

align-items와 비슷하지만, 여러 줄의 아이템을 정렬하는 역할을 합니다.

속성값	설명
flex-start	위쪽 정렬
flex-end	아래쪽 정렬
center	가운데 정렬
stretch	높이를 컨테이너에 맞춤
space-between	행 간격을 동일하게 배치
space-around	행 주위에 동일한 간격 배치

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

---

✅ (6) flex-wrap (줄 바꿈 설정)

Flex 아이템이 한 줄에 다 들어갈지, 여러 줄로 나눠질지를 설정하는 속성입니다.

속성값	설명
nowrap	한 줄에 전부 배치 (기본값)
wrap	여러 줄로 배치
wrap-reverse	여러 줄로 배치 (반대 방향)

.container {
  display: flex;
  flex-wrap: wrap;
}

 

---

 

2) 아이템 관련 속성 (자식 요소)

아이템 자체의 크기와 정렬 방식을 설정하는 속성들입니다.

 

✅ (1) flex-grow (확장 비율)

남은 공간을 비율대로 채웁니다. 기본값은 0입니다.

.item {
  flex-grow: 1; /* 모든 아이템이 동일한 비율로 늘어남 */
}

---

✅ (2) flex-shrink (축소 비율)

화면이 줄어들 때 아이템이 줄어드는 비율을 설정합니다.

.item {
  flex-shrink: 0; /* 줄어들지 않음 */
}

---

✅ (3) flex-basis (기본 크기)

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

.item {
  flex-basis: 100px; /* 너비 또는 높이 */
}

---

✅ (4) flex (축약형)

flex-grow, flex-shrink, flex-basis를 한 번에 설정하는 속성입니다.

.item {
  flex: 1 1 100px; /* grow, shrink, basis */
}

---

✅ (5) align-self (개별 아이템 정렬)

개별 아이템을 정렬할 때 사용합니다.

align-items의 개별 아이템 버전입니다.

.item {
  align-self: flex-start;
}

 

 

 

---

3. Flexbox 예제 코드

기본 레이아웃 예제

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  border: 2px solid black;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
}

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

 

 

 

---

정리

• flex-direction: 주축 방향 결정

• justify-content: 주축 정렬

• align-items: 교차축 정렬

• flex-wrap: 여러 줄 표시 여부

• flex-grow: 크기 비율 조정

• align-self: 개별 아이템 정렬

 

Flexbox는 웹사이트의 내비게이션 바, 카드 레이아웃, 버튼 그룹 정렬 등에 매우 유용합니다.

필요할 때마다 이 정리를 참고하면 좋겠습니다! 🚀