# Flexbox
Flexbox(플렉스박스)는 요소를 효율적으로 정렬하고 배치하는 강력한 레이아웃 시스템이야.
> 가로, 세로 정렬을 쉽게 제어하고, 반응형 디자인에 유용!

| 부모 속성 | 설명 | 옵션 |
|---|---|---|
| flex-direction | 주축 방향 설정 | row, row-reverse, column, column-reverse |
| justify-content | 주축 방향에서 아이템 정렬 | flex-start, flex-end, center, space-between, space-around, space-evenly |
| align-items | 교차축 방향에서 아이템 정렬 | flex-start, flex-end, center, stretch, baseline |
| align-content | 여러 줄 정렬 | flex-start, flex-end, center, space-between, space-around, stretch |
| flex-wrap | 자동 줄바꿈 | nowrap, wrap, wrap-reverse |
| flex-flow | = flex-direction + flex-wrap |

| 자식 속성 | 설명 | 옵션 |
|---|---|---|
| flex | = flex-grow + flex-shrink + flex-basis |
| flex-grow | 남은 공간 비율 |
| flex-shrink | 축소 비율 |
| flex-basis | 기본 크기 | auto |
| align-self | 개별적 아이템 정렬 | auto, flex-start, flex-end, center, baseline, stretch |
| order | 순서 변경 |


## Flexbox 개념 및 기본 구조
Flexbox는 **부모 요소(flex container)와 자식 요소(flex items)**로 구성돼.
```css
.container {
  display: flex;
} /* .container 내부의 모든 자식 요소가 Flex 아이템이 되어 정렬됨. */
```

요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.
* 주축 (main axis) 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다. 이 기본 축의 시작과 끝을 일컬어 main start과 main end라고 합니다.
* 교차축 (cross axis) 은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 cross start과 cross end라고 합니다.
* `display: flex`이 설정된 부모 요소를 일컬어 플렉스 컨테이너 (flex container) 라고 합니다.
* 플렉스 컨테이너 내부에 flexbox로 레이아웃되는 항목을 일컬어 플렉스 아이템 (flex items) 이라고 합니다.

### display: flex 기본 효과
* flex를 적용한 요소의 자식 요소(flex items)가 한 줄에 정렬됨
* 자식 요소의 width는 자동으로 콘텐츠 크기에 맞게 조정됨
* 기본적으로 가로 방향(row) 정렬. inline 요소도 블록처럼 배치됨
```css
.container {
  display: flex;
  background-color: lightgray;
}
.item {
  width: 100px;
  height: 50px;
  background-color: skyblue;
  margin: 5px;
}
```
```html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
```

## 부모 요소(.container) 속성
Flexbox 컨테이너(부모 요소)에서 레이아웃을 조정할 수 있는 주요 속성들!

### flex-direction
주축(main axis) 방향을 설정
* row :	기본값 (왼쪽 → 오른쪽 정렬)
* row-reverse :	오른쪽 → 왼쪽 정렬
* column :	위 → 아래 정렬
* column-reverse :	아래 → 위 정렬

```css
.container {
  display: flex;
  flex-direction: column;
} /* 아이템이 세로 방향으로 정렬됨! */
```

### justify-content
주축(main axis) 방향에서 아이템 정렬 방식
* flex-start :	왼쪽 정렬 (기본값)
* flex-end :	오른쪽 정렬
* center :	가운데 정렬
* space-between :	양끝 정렬 (사이 간격 자동)
* space-around :	요소 주변 간격 동일
* space-evenly :	요소 간 간격 동일
```css
.container {
  display: flex;
  justify-content: center;
} /* 아이템이 가로 방향으로 가운데 정렬됨! */
```

### align-items
교차축(cross axis) 방향에서 아이템 정렬 방식
* flex-start :	위쪽 정렬
* flex-end :	아래쪽 정렬
* center :	세로 중앙 정렬
* stretch :	높이를 컨테이너에 맞게 늘림 (기본값)
* baseline :	텍스트 기준선에 맞춤
```css
.container {
  display: flex;
  align-items: center;
}
```

### align-content
여러 줄의 아이템 정렬 방식 (flex-wrap: wrap 필요)
* flex-start :	위쪽 정렬
* flex-end :	아래쪽 정렬
* center :	가운데 정렬
* space-between :	위아래 간격 동일
* space-around :	요소 주변 간격 동일
* stretch :	전체 높이를 채움
```css
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
```

### flex-wrap
flex-wrap 속성은 Flexbox 컨테이너 안의 아이템이 한 줄에 배치될지, 여러 줄로 나눠질지를 결정하는 속성이야.
> 기본적으로 flex는 한 줄(nowrap)에 모든 아이템을 배치하지만, flex-wrap을 설정하면 자동 줄바꿈이 가능!
* nowrap :	한 줄에 모든 아이템을 배치 (기본값)
* wrap :	자동으로 줄바꿈하여 여러 줄로 배치
* wrap-reverse :	줄바꿈 + 아이템의 줄 순서를 반대로 배치
```css
.container {
  display: flex;
  flex-wrap: wrap;
} /* 아이템이 컨테이너 너비를 초과하면 다음 줄로 이동! */
```

## 자식 요소(.item) 속성
각 개별 아이템(flex items)에 적용하는 속성들!

### flex-grow
컨테이너의 남은 공간을 어떻게 나눌지 설정
* 0 :	기본값 (남은 공간을 차지하지 않음)
* 1 :	동일한 비율로 남은 공간을 나눠 가짐
* 2 이상 :	비율을 설정하여 공간 차지
```css
.item:first-child {
  flex-grow: 2; /* 첫 번째 아이템이 두 배 크기 */
}
.item {
  flex-grow: 1;
}
```

### flex-shrink
공간이 부족할 때 크기가 줄어드는 비율
* 0 :	크기를 줄이지 않음
* 1 :	기본값 (동일한 비율로 축소)
* 2 이상 :	더 많이 줄어듦
```css
.item:first-child {
  flex-shrink: 2; /* 첫 번째 아이템이 두 배 더 줄어듦 */
}
```

### flex-basis
요소의 기본 크기를 지정
* auto :	내용 크기에 따라 자동 설정
* px, % :	고정 크기 지정
```css
.item {
  flex-basis: 200px;
}
```

### align-self 
align-self는 개별 그리드(Grid) 또는 플렉스(Flexbox) 아이템의 세로 정렬을 조정하는 속성이야.

> align-items가 컨테이너 내부의 모든 아이템을 정렬하는 반면,
align-self는 특정 아이템 하나만 개별적으로 정렬 가능!

* auto :	부모(align-items) 설정을 따름 (기본값)
* flex-start :	위쪽 정렬
* flex-end :	아래쪽 정렬
* center :	세로 중앙 정렬
* baseline :	텍스트 기준선에 맞춤
* stretch :	컨테이너 높이에 맞게 늘어남 (기본값)

```css
.container {
  display: flex;
  align-items: center; /* 모든 아이템을 세로 중앙 정렬 */
}
.item:nth-child(2) {
  align-self: flex-start; /* 두 번째 아이템만 위쪽 정렬 */
}
```

### order
아이템의 정렬 순서를 변경
* 0 :	기본값 (HTML 순서대로)
* 1, 2, 3 :	숫자가 클수록 뒤로 이동
* -1 :	앞으로 이동
```css
.item:nth-child(2) {
  order: -1; /* 두 번째 아이템을 맨 앞으로 이동 */
}
```