flex-shrink
레이아웃에서 요소의 크기가 축소될 때 얼마나 줄어들지를 결정하는 속성
요소의 크기가 레이아웃의 크기보다 커서 레이아웃을 넘어설 때, flex-shrink를 사용하면 주어진 비율에 맞게 크기가 조절됩니다.
위의 그림에서는 요소의 크기가 레이아웃의 범위를 벗어납니다.
flex-shrink: 1; 을 모든 요소에 적용하면 같은 비율로 레이아웃 범위에 맞는 크기로 축소됩니다.
각 요소들의 크기를 조정하지 일일이 조정하지 않아도 간편하게 맞출 수 있습니다.
flex-shrink의 기본 값은 0이며, 숫자가 커질 수록 줄어드는 크기가 더 큽니다.
만약 비율을 다르게 하고자 한다면 각각 요소에 따로 flex-shrink를 사용해야 합니다.
