우리는 flex-warp:nowrap;일때 화면 크기를 줄이면 요소들의 속성이 줄어든다는 사실을 알고 있다. 하지만 크기를 줄이는 속도를 각기 다르게 정하고 싶다. 그럴땐 어떻게 해야할까?

flex-shrink : 1;

flex-shrink : 1은 defalut값이다. 이렇게 지정하면 똑같은 속도로 줄어들지만 2로 속성을 변경하고나서 여백이 사라지는 순간 다른 속도로 줄어들게 된다.

우리는 또한 다른 속도로 요소들의 크기를 늘릴 수 있다.

flex-grow : 0;

flex-grow : 0는 defalut값이다. 이렇게 지정하면 여백이 있는 채로 있지만, flex-grow:1을 하는 순간! 모든 여백들이 flex-grow값이 지정된 요소에게 다 잡아먹힌다.

스크린샷 2022-06-29 오후 3.17.12.png

스크린샷 2022-06-29 오후 3.17.17.png

요렇게 잡아먹힌다!