flex-basis: 0;을 설정하면 flex-shrink의 역할이 사실상 의미가 없어진다고 한다. 왜 그럴까? 이 글에서는 flex-basis: 0;과 flex-shrink의 동작 방식을 깊이 파헤쳐 보고, 실제로 어떻게 작동하는지 살펴보자.
1️⃣ flex-shrink란?
flex-shrink는 부모 컨테이너가 줄어들 때, flex 아이템이 얼마나 줄어들 수 있는지를 결정하는 속성이다. 기본적으로 flex-shrink: 1;은 아이템이 부모가 줄어들면 줄어들도록 허용한다.
하지만, flex 아이템이 줄어든다는 것은 원래 크기(기본 너비)가 있어야 가능하다. 즉, flex-basis나 width 값이 존재해야 의미가 있다.
2️⃣ flex-basis: 0;을 설정하면 어떻게 될까?
.flex-item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}📌 위 설정이 의미하는 것:
flex-basis: 0;→ 아이템의 초기 크기를 0px로 설정하여, 원래의 내용 크기를 무시한다.flex-grow: 1;→ 부모 컨테이너의 남은 공간을 균등하게 나누어 가진다.flex-shrink: 1;→ 부모 컨테이너가 줄어들면 아이템도 줄어들도록 설정되어 있다.
하지만 아이템이 이미 0px에서 시작했다면, flex-shrink는 의미가 있을까?
3️⃣ flex-basis: auto;와 비교하기
✅ (1) flex-basis: auto; (기본 너비를 유지)
.flex-item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}📌 동작 방식:
- 아이템의 초기 크기는 내용 크기 또는
width값에 따라 결정된다. - 부모 컨테이너가 줄어들면, 각 아이템이
flex-shrink값에 따라 다른 비율로 줄어든다.
🔽 결과 (부모가 줄어들 때)
[ 아이템1 (긴 텍스트) ][ 아이템2 (중간) ][ 아이템3 (짧음) ]✔ 각 아이템의 초기 크기가 다르므로, 서로 다르게 줄어든다.
✔ flex-shrink 값이 적용되어 큰 아이템이 더 많이 줄어들 수 있다.
🔵 (2) flex-basis: 0; (모든 아이템이 균등 분배)
.flex-item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}📌 동작 방식:
- 모든 아이템이 초기 크기
0px에서 시작한다. flex-grow: 1;에 의해 부모 컨테이너의 공간이 균등하게 분배된다.- 부모 컨테이너가 줄어들면, 아이템도 균등하게 줄어든다.
🔽 결과 (부모가 줄어들 때)
[ 아이템1 ] [ 아이템2 ] [ 아이템3 ]✔ 이미 0px에서 시작했으므로, flex-shrink가 아무런 의미가 없다.
✔ 모든 아이템이 동일한 크기로 줄어든다.
✔ 기본 크기가 없으므로, flex-shrink 값을 변경해도 아무런 변화가 없다.
4️⃣ 결론 – flex-shrink는 왜 의미가 없어질까?
✅ flex-basis: 0;을 설정하면 아이템이 초기 크기를 0px로 시작하기 때문에, 줄어들 공간이 없다.
✅ flex-grow: 1;이 적용되면서 부모 컨테이너의 크기 변화에 따라 균등하게 크기를 나누어 가진다.
✅ 따라서 이미 0px에서 시작한 아이템은 flex-shrink가 작동할 필요가 없다.
✅ flex-basis를 auto 또는 특정 크기(200px 등)로 설정해야 flex-shrink가 의미를 갖는다.
📌 정리하자면:
flex-basis: auto;→flex-shrink가 적용되며 아이템마다 다른 속도로 줄어들 수 있다.flex-basis: 0;→ 아이템이 0px에서 시작하므로flex-shrink가 사실상 필요 없어진다.
🚀 따라서, flex-basis: 0;을 설정했다면 flex-shrink는 무시해도 된다!
