flex-grow, shrink, basis 완전정복 – 공간 나누기의 핵심 공식

 

 

Flexbox를 쓰다 보면 한 아이템은 꽉 차고, 다른 건 작게 줄어들고,
비율대로 공간을 유연하게 나누고 싶을 때가 있어요.
그럴 때 반드시 알아야 할 속성이 바로 이 3가지!

• flex-grow
• flex-shrink
• flex-basis

이번 포스팅에서는 이 3개의 속성이 어떻게 조합되고,
공간을 어떻게 계산해서 배치하는지 확실히 정리해보겠습니다!

---

✅ 기본 문법

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

 

사실 이 3개는 하나로 합쳐서도 쓸 수 있어요!

.item {
  flex: 1 1 0;
}

 

---

 

1️⃣ flex-grow – 남는 공간을 얼마나 "더" 가져갈지

.item {
  flex-grow: 1;
}

 

flex-grow는 컨테이너에 남는 여유 공간을 아이템끼리 나눌 때
누가 더 얼마나 차지할지를 정하는 속성이에요.

.item-a { flex-grow: 1; }
.item-b { flex-grow: 2; }

💡 item-b는 item-a보다 2배 넓게 공간을 차지하게 돼요!

---

 

2️⃣ flex-shrink – 공간이 부족할 때 얼마나 "줄어들" 수 있을지

.item {
  flex-shrink: 1;
}

 

flex-shrink는 공간이 모자랄 때,
누가 더 많이 줄어들지를 결정하는 속성이에요.

.item-a { flex-shrink: 1; }
.item-b { flex-shrink: 3; }

 

item-b는 item-a보다 3배 더 줄어들 수 있음을 의미해요.

기본값이 1이라서 따로 안 써도 줄어들긴 하는데,
특정 아이템만 작게 만들고 싶다면 직접 지정하는 게 좋아요.

 

---

 

3️⃣ flex-basis – 아이템의 "기본 크기" 지정

.item {
  flex-basis: 200px;
}

 

이건 말 그대로 “이 아이템은 기본적으로 이 정도 크기로 시작할게요!”라는 의미예요.
그 이후 공간이 남으면 flex-grow로 커지고,
모자라면 flex-shrink로 줄어드는 거죠.

.item {
  flex: 1 1 200px;
}

 

→ 기본은 200px, 상황 봐서 커지기도, 작아지기도 합니다.

---

 

✨ 핵심 요약

속성	역할	기본
flex-grow	남는 공간을 나눠 가질 비율	0
flex-shrink	공간 부족할 때 줄어드는 비율	1
flex-basis	기본 크기 설정	auto

 

💡 이 3개를 같이 쓰면 아이템별 공간 배분을 완전히 제어할 수 있어요!

 

---

 

🤔 언제 쓰면 좋을까?

• 카드 UI를 비율대로 균등 정렬할 때
• 어떤 아이템은 작게, 어떤 아이템은 꽉 채우고 싶을 때
• 화면 사이즈가 줄어들 때 자동으로 줄어드는 레이아웃 만들고 싶을 때