flex-grow

기본값 : 0

부모 flex-container 의 여백만큼 flex-item 요소의 영역을 비율에 맞춰 늘려준다.

요소들의 크기가 부모의 영역을 모두 채우면 아무 역할을 하지않는다.

flex-shrink

기본값: 1

부모 flex-container의 영역에서 flex-item 요소들이 벗어날 경우 비율에 맞춰 container의 영역에서 벗어나지 않도록 비율에 맞춰 줄여준다.

요소들의 크기가 부모의 영역을 벗어나지 않으면 아무 역할을 하지 않는다.

flex-shrink: 0 으로 지정하면 지정된 기본 영역을 보장받는다.

모든 flex-item 요소의 flex-shrink 속성이 0이 되면 부모 컴포넌트의 영역을 벗어난다.

flex-basis

기본값: auto

부모 flex-container의 flex-direction방향으로 flex-item 요소의 기본 크기를 지정한다.

사용 예시

카카오톡 채팅창처럼 헤더, 푸터 영역의 크기를 유지하고 중간 요소의 크기만 변하도록 설정할 수 있다.