[CSS ] 05. Flexbox 레이아웃

[CSS ] 05. Flexbox 레이아웃

---

1. Flexbox란?

Flexbox는 요소들을 한 방향(가로 또는 세로)으로 정렬하고 배치하기 위한 레이아웃 방식이다.

부모 요소에 flex 속성을 적용하여 자식 요소들의 정렬과 간격을 제어한다.

---

2. Flexbox 기본 구조

Flexbox는 컨테이너와 아이템으로 구성된다.

.container {
    display: flex;
}

• flex 컨테이너 : display: flex가 적용된 부모 요소
• flex 아이템 : 컨테이너 내부의 자식 요소

---

3. 주축(Main Axis)과 교차축(Cross Axis)

Flexbox는 두 개의 축을 기준으로 동작한다.

• 주축(Main Axis) : 요소가 배치되는 기본 방향
• 교차축(Cross Axis) : 주축과 수직인 방향

---

4. flex-direction

주축의 방향을 설정한다.

.container {
    flex-direction: row;
}

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

---

5. justify-content

주축을 기준으로 아이템을 정렬한다.

.container {
    justify-content: center;
}

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

---

6. align-items

교차축을 기준으로 아이템을 정렬한다.

.container {
    align-items: center;
}

• stretch (기본값)
• flex-start
• flex-end
• center
• baseline

---

7. flex-wrap

아이템이 한 줄에 다 들어가지 않을 경우의 처리 방식이다.

.container {
    flex-wrap: wrap;
}

• nowrap : 줄바꿈 없음 (기본값)
• wrap : 줄바꿈 허용
• wrap-reverse : 역방향 줄바꿈

---

8. align-content

여러 줄이 있을 때 교차축 기준으로 줄 전체를 정렬한다.

.container {
    align-content: space-between;
}

---

9. flex 아이템 속성

1) flex-grow

남는 공간을 얼마나 차지할지 비율로 설정한다.

.item {
    flex-grow: 1;
}

---

2) flex-shrink

공간이 부족할 때 줄어드는 비율을 설정한다.

.item {
    flex-shrink: 1;
}

---

3) flex-basis

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

.item {
    flex-basis: 100px;
}

---

4) flex (단축 속성)

.item {
    flex: 1 1 100px;
}

---

10. 정리

• Flexbox는 한 방향 레이아웃에 적합하다
• 컨테이너와 아이템 개념이 중요하다
• 주축과 교차축 개념을 이해해야 한다
• 정렬과 간격 제어가 간단하다