Flex shrink / grow

 

1. Flex grow : 해당 속성을 가진 요소가  그 줄에 남은 width를 다 차지하게 만드는 것

 

Ex)

<div class="부모">  = 부모의 width : 500px

<button>'자식1'</button> = 자식1의 width : 200px

<button'자식2'</button> = 자식2의 width: 200px

 

</div>

 

이런 상황이 있다면 부모의 width 500중 100px은 여유롭게 된다.

500px중 남아있는 width를 차지하게 만드는 것은 flex-grow

 

2. Flex-shrink : 말 그대로 웅크린 것을 펴버리는 것이다.

 

 

앞에 input이 많은 공간을 이미 차지해버려서 Get started 버튼이 차지할 공간이 줄었다.

그러므로 자연스럽게 get started는 입력된 width값보다 작아지게 됐다. 부모 요소를 늘리지 않고서는 원하는 사이즈로 만들어줄 수 없다 그렇다면 input값을 줄이는 방법 밖에 없는데

이럴때 flex-shrink 속성을 get started에 적용하면 기존의 부모요소 width값내에서

다른 값을 줄여서

 자신의 css 입력된 버튼의 사이즈로 만들고 늘어난다.

 

ex)

이렇게 width : 160px 그리고 flex-shrink: 0;을 주면

어떠한 상황에서도 160px을 최우선적으로 유지하게 된다.