[CSS] flex-grow, flex-shrink

flex-grow와 flex-shrink는 모두 flex 아이템들을 늘리거나 줄이는 역할을 한다.

flex-grow

container가 400px이고 item들이 100px이므로 100px이 남게 된다.
이 남은 100px을 flex-grow의 값만큼의 비율로 먹게 된다고 보면 될 것 같다.
각각 분홍 / 노랑 / 파랑색 박스에 flex-grow를 1 / 0 / 3 만큼 준다고 가정해보자

그렇다면 남은 100px을 1 / 0 / 3 비율로 추가로 가져가게 된다.
즉 각 25px / 0 / 75px을 가져가는 것이고
각 item들은 총 125px / 100px / 175px이 된다.

flex-shrink

그렇다면, flex-shrink는 어떨까?
shrink는 items가 container보다 더 길어서 벗어났을 때 적용한다.
flex-shrink 값은 default 값이 1이므로 속성을 정의하지 않아도 자동으로 줄어든다. 따라서, 줄어들지 않도록 하려면 flex-shrink 값을 0으로 정의해야 한다.

이번엔 flex-shrink 1 / 0 / 3 만큼 준다고 가정해보자

그렇다면 초과된 100px을 1 / 0 / 3 비율로 덜 가져가게 된다.
즉 각 25px / 0 / 75px 만큼 줄어들고,
각 item들은 총 75px / 100px / 25px이 된다.

🚨 flex-shrink는 flex-wrap: wrap일 때 적용되지 않는다!