[CSS] Flexbox - flex-grow와 flex-shrink

1. flex-grow란?

남는 공간이 있을 때, 아이템이 얼마나 늘어날지를 결정하는 속성입니다.

.item {
  flex-grow: 1;
}

• 기본값: 0 (늘어나지 않음)
• 값은 비율을 의미
• 값이 클수록 더 많은 공간을 차지

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

남는 공간을 1 : 2 비율로 나눔

 

 

2. flex-shrink란?

공간이 부족할 때, 아이템이 얼마나 줄어들지를 결정하는 속성입니다.

.item {
  flex-shrink: 1;
}

• 기본값: 1 (줄어듦)
• 0으로 설정하면 절대 줄어들지 않음

.item {
  flex-shrink: 0;
}

 

컨테이너가 작아져도 크기 유지

3. 동작 기준 정리

• 기준은 항상 주축(Main Axis)
• flex-direction에 따라 가로/세로가 바뀜
• width / height는 기본 크기,
  grow·shrink는 상황에 따른 보정

 

4. 자주 쓰는 패턴

 

한 칸만 유연하게 늘리기

.sidebar {
  flex-shrink: 0;
}
.content {
  flex-grow: 1;
}

사이드바 고정 + 콘텐츠 영역 유동

 

 

5. 정리하면

• flex-grow = 남는 공간 분배
• flex-shrink = 부족한 공간 압축
• 둘 다 비율 개념
• 기준은 항상 주축