Flexbox 바로 알기(5) :: flexible 레이아웃을 위한 flex-basis, flex-shrink, flex-grow

`flex-basis`, `flex-shrink`와 `flex-grow`는 flex child 요소에게 직접 줄 수 있는 css 속성으로,

각각 아이템의 기본 크기, 화면의 변화에 따라 flex item이 얼마나 수축(크기 감소)하고 팽창(크기 증가)할지를 정의한다. 

 

해당 속성들은 flexible한 반응형 디자인을 설계할 때 유용하게 사용할 수 있다.

 

flex-shrink

`flex-shrink`는 box가 화면 공간을 넘어갈 경우에 box 크기를 어떻게 조정할 것인가를 결정하는 속성이다.

flexbox의 크기를 줄여서 공간이 부족할 때, 자식 element 중 어떤 box의 크기를 얼마나 줄일지 정의할 수 있다.

✅ 기본값 `flex-shrink: 1;`
모든 자식 요소가 똑같은 비율 크기로 줄어든다.

 

`flex-shrink`의 속성값을 크게 설정할수록 화면이 줄어들 때 더 큰 비율로 작아진다.

.child:nth-child(2){
    flex-shrink: 2; /* 2번째 box가 다른 element들보다 2배 더 많이 줄어듦 */
}

화면 크기가 여유로울 때에는 각 width가 그대로 유지되지만,

화면 크기가 줄어들면서 자리가 부족해지면 flex-shrink 속성값에 따라 크기가 달라진다!

flex-grow

`flex-grow`는 box 크기를 얼마나 키워서 화면 상에 남는 공간을 어떻게 나눠가질 것인가를 결정하는 속성이다.

`flex-shrink`와 반대로 flex item이 정해진 기본 width 값을 넘어서 늘어날 수 있게 만든다.

✅ 기본값 `flex-grow: 0;`
기본 width 값을 그대로 유지한 채 늘어나지 않는다.

 

grow 속성값이 클수록 주변의 빈 공간을 많이 차지하면서 element 크기도 커진다.

이때, 주변에 더 이상 늘어날 만한 여유 공간이 없다면 그대로 상태가 유지된다!

 

flex-basis

`flex-basis`는 flex item의 기본 크기를 설정하는 방법이다.

width / height 속성으로 고정된 값을 설정하는 것보다 좀 더 크기를 유동적으로 변화하게 만들 수 있다는 장점이 있다.

 

flex-basis: 33%;

`flex-basis`는 main axis에서 flex item의 크기를 정의하기 때문에 flex-direction이 row라면 너비(width)를, column이라면 높이(height) 값을 결정한다.

 

이때 설정되는 크기는 flex-grow, flex-shrink 등으로 변하기 전의 초기 size로, flex-basis로 먼저 기본 크기가 정해진 후에 다른 속성이 적용되어서 크기가 늘어나거나 줄어들게 된다!