CSS의 flex-grow, flex-shirink, flex-basis에 대해서

CSS의 flex-grow, flex-shirink, flex-basis에 대해서

flex 속성은 CSS의 Flexbox 레이아웃을 사용할 때 유용한 속성 중 하나입니다. Flexbox는 요소의 크기와 순서를 유연하게 조절하여 레이아웃을 구성하는 데 도움이 됩니다. 

flex-grow: 이 값은 유연한 공간을 얼마나 차지할 지를 결정합니다. 즉, 해당 아이템이 늘어나는 비율을 설정합니다. 기본값은 0입니다.

값이 0이면, 유연한 공간에서 아이템이 늘어나지 않습니다.
값이 양수이면, 다른 flex 아이템보다 더 많이 늘어납니다.
모든 flex 아이템의 flex-grow 값이 1인 경우, 유연한 공간을 모두 차지하며 동일한 비율로 늘어납니다.
값이 클수록 해당 아이템이 더 많은 공간을 차지합니다.

 

flex-shrink: 이 값은 유연한 공간이 축소될 때 아이템이 얼마나 줄어들지를 결정합니다. 기본값은 1입니다.

값이 0이면, 아이템이 축소되지 않습니다.
값이 클수록, 아이템이 더 많이 축소됩니다.
음수값은 허용되지 않습니다.

 

flex-basis: 이 값은 아이템의 초기 크기를 결정합니다. 기본값은 auto로, 아이템의 내용에 따라 크기가 자동으로 조정됩니다.

픽셀, 백분율, em 등 단위를 사용하여 크기를 정의할 수 있습니다.
flex-basis를 설정하면 flex-grow와 flex-shrink가 적용되기 전에 초기 크기가 정해집니다.

간단히 말해, flex-grow는 아이템이 늘어나는 비율을 설정하고, flex-shrink는 아이템이 줄어드는 비율을 설정합니다. flex-basis는 초기 크기를 결정합니다. 이러한 속성들을 함께 사용하여 Flexbox 레이아웃을 유연하게 조정할 수 있습니다.