flex ( flex-grow, flex-shrink, flex-basis )

flex-grow, flex-shink도 children에게 줄 수 있는 옵션이다.

 

flex-shrink

flex-wrap옵션을 주지 않으면 우리가 children에게 주었던 width값들이 찌그러지면서 wrapper의 width에 맞추려고 한다.

 

이 때 flex-shrink를 주면 특정 child를 다른 child보다 더 찌그러지게 할 수 있다.

flex-shrink의 기본값은 1이다.

 

flex-shrink를 2로주면 다른 child보다 크키가 2배로 줄어들게 된다.

모든 box가 같은 크기로 찌그러지는 걸 원하지 않을 때 이걸 사용하면 된다.

 

flex-grow

flex-grow는 flex-shrink와 같지만 반대로 작용한다.

flex-grow의 기본값은 0이다.

 

이건 줄어들 때는 똑같이 줄어든다. 하지만 여유공간이 생길경우 ( 각 box의 width값이 보장 된 경우 ) 브라우저의 남은 공간을 flex-grow가 가져간다. justify-content : space-around와 같이 box 사이 마다 공간을 주는 옵션들이 무시되면서까지 남은 공간을 flex-grow를 가진 child가 가져간다.

 

flex-grow옵션을 가진 child가 하나라면 숫자에 상관없이 남은 공간을 독차지 한다.

하지만 2개의 child에서 하나는 flex-grow : 2 . 하나는 1로 주어진다면 남은 공간을 2/3 , 1/3 씩 비율만큼 가져가게된다.

같은 값이라면 반반씩 가져간다.

2가 flex-grow : 1인경우

2가 flex-grow : 1, 3이 flex-grow : 2인경우

 

flex-basis

flex-basis도 child에게 주는 속성이다. width, height를 지우고 flex-basis : 300px을 줘보겠다.

height는 글씨 크기만큼 가질 것이고 width는 300px이 적용되었다. 그럼 width랑 무슨차이인지 궁금할 것이다.

 

flex-basis는 main axis를 기준으로 item들의 크기값을 정하는 것이다. 현재는 flex-direction이 row인 기본상태이니까 

width에 300px이 적용이 되었다. 

 

이번엔 flex-direction을 column으로 바꾸어 보자.

이번엔 height가 300px이 된 것이다. 가로로 가득 찬 이유는 cross axis가 세로로 바뀌었기 때문에 align-items의 기본 값인 stratch가 적용이 되었기 때문이다.

 

이 뿐만 아니라 width를 100px로 적용하고 그 안에 200px짜리 이미지를 넣는 경우 이미지가 튀어나오게 된다.

하지만 flex-basis를 100px로하고 그 안에 200px짜리의 이미지를 넣는 경우 자동으로 image의 width만큼 변하게된다.

 

이러한 차이점이 있다.