flex-grow, flex-shrink

플렉스박스의 유연한 레이아웃을 가능하게 하는 가장 중요한 속성 두가지가 flex-grow와 flex-shrink다.

두 속성은 flex-basis속성으로 정한 플렉스박스 아이템의 기본 너비를
자동으로 늘어나거나(flex-grow),
줄어들도록(flex-shrink)해서
행 안에 적절한 너비로 배치하도록 맞추는 기능을 한다.

flex-grow

플렉스박스 아이템의 기본 너비를 자동으로 늘어나게 한다.

• default 값은 0 이다.
• flex-grow가 0이라는 것은 플렉스박스가 콘텐츠에 필요한 만큼의 공간만 차지함을 의미한다.(기본적으로 컨텐츠 사이즈 만큼 박스가 표시됨)

flex-grow를 서로 1로 주었을때의 모습

See the Pen hello by 정중식 (@정중식) on CodePen.

flex-grow를 한쪽을 더 높게 주었을때의 모습

See the Pen hello by 정중식 (@정중식) on CodePen.

예시처럼, flex-grow는 아이템의 기본 너비를 자동으로 늘어나게한다.

flex-shrink

플렉스박스 아이템의 기본 너비를 줄어들도록 한다.

• default 값은 1이다.
• 화면이 축소되었을때 요소안의 컨텐츠가 줄어드는 크기를 결정한다.
  
• flex-shrink의 값이 높아질수록 축소되는 속도가 빨라진다.

전체화면으로 놓고 화면을 줄일 때, 빨간 박스안의 텍스트가 더 빨리 줄어들고, 노란색 박스는 안줄어든다. 초록색박스는 빨간 박스안의 텍스트보다 좀 늦게 줄어드는걸 볼 수 있다.

See the Pen hello by 정중식 (@정중식) on CodePen.

flex-shrink를 정리하면, 레이아웃에서 먼저 축소해야하는 상자를 선택할 수 있다.
더 심화과정으로는,
어느 것이 축소되어야 하고,(flex-shrink값을 2이상 줬을때 )
어떤 것이 절대 축소되어서는 안되는지 설정할 수 있다.(flex-shrink를 0~1을 줬을때)

난 flex-shrink 속성을 z-index처럼 상대적인거라고 이해했다.