#16. CSS - Flex items 속성 :: shrink

shrink

container가 감소할 때 item이 감소하는 비율을 설정하니다.
숫자가 크면 더 많은 너비가 감소합니다.
grow와 마찬가지로 item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.

기본값은 1입니다.

flex-shrink: 감소너비;

현재 너비가 100px인 두 개의 item A와 B가 있다고 가정해보겠습니다. 각각 아이템에 flex-shrink를 2, 1로 주도록 하겠습니다.

만약 container의 너비를 30px만큼 줄이면 item A와 item B의 크기는 어떻게 계산이 될까요?

먼저 너비를 계산하기 전에 item A와 item B의 비율을 계산해야합니다.

item A의 너비 * item A의 shrink : item B의 너비 * item B의 shrink

item 너비 = 기존 너비 - (container가 줄어든 너비 / 비율의 총합 * 해당 item 비율)

위의 예를 보면 복잡해보이지만 실제로 계산해보면 어렵지 않습니다.

비율 계산 :: 100px * 2 : 100px * 1
비율 계산 :: 200 : 100
비율 계산 :: 2 : 1

item A의 너비 = 100px - (30px / 3 * 2)
item B의 너비 = 100px - (30px / 3 * 1)

shrink 값이 더 큰 item A의 너비가 더 많이 줄어든 것을 확인하실 수 있습니다.

item A의 너비 = 80px
item B의 너비 = 90px

다음은 크기가 다른 item A(200px, shrink:2)와 item B(100px, shrink:1)를 계산해보도록 하겠습니다.

비율계산:: 200px * 2 : 100px * 1
비율계산:: 400 : 100
비율계산:: 4 : 1

item A의 너비 = 200px - (30px / 5 * 4)
item B의 너비 = 100px - (30px / 5 * 1)

item A의 너비 = 176px
item B의 너비 = 94px

더 궁금하신 분들은 codepen에서 직접 넣어보시고 계산해보시기 바랍니다 ^^