저번에 말씀드린 Flexbox 중에서 flex-shrink 속성은 Flexbox의 핵심 속성 중 하나로 Flex 아이템이 Flex 컨테이너 안에서 어떻게 축소되는지를 결정하는 역할을 합니다. 그래서 이 글에서는 더 세분화 해서 flex-shrink 속성의 기본 개념부터 사용법, 그리고 주의점까지 상세하게 알아보겠습니다.
flex-shrink 속성의 기본 개념
flex-shrink 속성은 Flex 아이템이 공간이 부족할 경우 얼마나 축소될 수 있는지를 결정하는 속성입니다. 이 속성의 값은 0 이상의 숫자로 설정할 수 있으며 기본값은 1입니다. 이 값은 Flex 아이템들이 Flex 컨테이너의 공간에 비해 너무 크다면 각 아이템이 얼마나 축소될지를 결정하는 비율을 의미합니다.
flex-shrink의 사용법
flex-shrink 속성은 아래와 같이 사용할 수 있습니다.
css
.item {
flex-shrink: 1; /*들어가는 숫자는 축소하고 싶은 비율대로 넣어주시면 됩니다.*/ }여기서 숫자 부분은 각 Flex 아이템이 Flex 컨테이너 내에서 얼마나 많이 축소될 수 있는지를 결정하는 비율을 나타냅니다. 예를 들어, 두 개의 Flex 아이템이 있고 각각의 flex-shrink 값이 1과 2라면, 두 번째 아이템은 첫 번째 아이템보다 두 배 더 많이 축소됩니다.
특히 flex-shrink: 0;으로 숫자에 ‘0’을 넣게 되면 flex 아이템이 flex 컨테이너의 크기가 줄어들 때 아이템 자체의 크기를 줄이지 않도록 지정합니다. 즉, flex 아이템의 크기는 원래의 크기를 유지하게 되며 컨테이너의 크기 변화에 따라 크기가 줄어들지 않습니다. 예를 들어 왼쪽은 로고 같은 이미지로 고정해 놓고 오른쪽에 있는 텍스트는 폭에 따라서 반응형으로 줄어들었다가 늘어나게 설정을 할 때 주로 flex-shrink: 0;을 사용합니다. 저는 flex-shrink를 주로 0으로 가장 많이 사용하고 있습니다.
flex-shrink와 다른 Flex 속성과의 관계
flex-shrink 속성은 다른 Flex 속성과 함께 사용되어 더욱 효과적인 레이아웃을 구성할 수 있습니다. 특히 flex-grow와 flex-basis 속성과 함께 사용되는 경우가 많습니다. flex-grow 속성은 flex-shrink와 반대로, Flex 아이템이 Flex 컨테이너 내에서 얼마나 많이 확장될 수 있는지를 결정하는 속성입니다. flex-basis 속성은 Flex 아이템의 초기 크기를 결정하는 속성입니다.
이 세 가지 속성은 flex라는 단축 속성을 통해 한 번에 설정할 수 있습니다. 예를 들어, flex: 1 2 200px;라는 속성을 설정하면, flex-grow는 1, flex-shrink는 2, flex-basis는 200px로 설정된 것입니다.
flex-shrink의 주의점
flex-shrink 속성을 사용할 때 주의해야 할 점은 이 속성이 원래의 아이템 크기를 무시하고 축소시킨다는 점입니다. 따라서 아이템의 최소 크기를 지정해야 하는 경우 min-width 또는 min-height 속성을 함께 사용해야 합니다.
결론
Flexbox의 flex-shrink 속성은 Flex 아이템이 Flex 컨테이너 내에서 얼마나 축소될 수 있는지를 결정하는 중요한 속성입니다. 이 속성을 이해하고 활용하면 공간이 부족할 때도 유연하게 대처할 수 있는 레이아웃을 구성할 수 있습니다.