(위의 이미지에서 border를 화면넓이라고 상정하면 알기쉬움)

flex-grow: 남는 공간을 얼마나 가져갈지

flex-shrink: 공간이 부족할때 얼마씩 줄일지

---

✅ 1. flex-grow: 남는 공간을 얼마나 가져갈까?

• 부모에 남는 공간이 있을 때, 얼마나 많이 늘어날지를 비율로 결정
• 예: flex-grow: 1 → 남는 공간을 1 비율로 가져감
• 여러 아이템에 flex-grow를 다르게 주면 비율대로 나눠 가짐

📌 예시:

.item1 {
    flex-grow: 1;
}
.item2 {
    flex-grow: 2;
}

👉 남는 공간을 item2가 item1보다 2배 더 차지함

---

✅ 2. flex-shrink: 공간이 부족할 때 얼마나 줄일까?

• 공간이 모자랄 때, 얼마나 많이 줄어들지를 비율로 설정
• flex-shrink: 0이면 줄어들지 않음

📌 예시:

.item1 {
    flex-shrink: 1;
}
.item2 {
    flex-shrink: 0;
}

👉 공간 부족 시 item1은 줄고, item2는 안 줄어듦

---

✅ 3. flex-basis: 기본 크기

• 아이템의 기본 너비/높이를 설정 (grow/shrink 기준점)
• width와 비슷하지만 flex 전용
• flex-basis: auto면 content 크기나 width 등으로 계산

📌 예시:

.item {
    flex-basis: 200px;
}

👉 아이템은 기본적으로 200px로 시작

---

✅ 종합: flex: grow shrink basis

예:

.item {
    flex: 1 1 200px;
}

• 기본 크기 200px
• 공간 남으면 grow: 1만큼 늘어나고
• 공간 부족하면 shrink: 1만큼 줄어듦

---

flex-shrink와 flex-basis 사용 예제

✅ .sidebar { width: 200px; }

• 기본 크기: 200px
• 줄어들 수 있음: 부모가 flex 컨테이너일 경우, 자식 요소는 기본적으로 flex-shrink: 1이 적용되어 있어서, 공간이 부족하면 자동으로 줄어듭니다.
• 예를 들어, 전체 폭이 180px이면 .sidebar는 200px이 아니라 그보다 작아질 수 있습니다.

---

✅ .sidebar { flex: 0 0 200px; }

• 기본 크기: 200px
• 절대 줄어들지 않음: flex-shrink: 0을 지정해서 공간이 부족해도 줄어들지 않습니다.
• 늘어나지도 않음: flex-grow: 0으로 설정했기 때문에 남는 공간이 있어도 크기가 커지지 않습니다.
• 항상 정확히 200px 유지: flex-basis: 200px으로 기준 크기를 명확히 지정했기 때문입니다.

---

💡 간단 비교

| 속성 | 줄어듦 | 늘어남 | 고정 너비 | | ----------------- | ------ | ------ | --------- | | width: 200px | O | X | X | | flex: 0 0 200px | X | X | O |

이런 차이 때문에, 항상 200px로 유지하고 싶다면 flex: 0 0 200px을 사용하는 것이 더 안전합니다.

** flex-basis란?** Flex 아이템의 기준 크기를 정하는 속성입니다. width와 비슷하지만, flex 레이아웃 안에서는 width보다 우선 적용됩니다.