flex grow
flex-grow는 요소가 남는 공간을 얼마나 차지할지 결정합니다.
flex-grow: 0은 확장되지 않고 원래 크기를 유지합니다.
flex-grow: 1은 남은 공간을 전부 차지합니다.
두 박스에 동일하게 flex-grow: 1을 적용하면 남은 공간을 나눠가지고 동일한 비율로 확장됩니다.
flex-grow: 2를 적용한 박스가 flex-grow: 1을 적용한 박스보다 2배 많이 확장됩니다.
flex shrink
flex-shrink는 요소가 공간이 부족할 때 얼마나 줄어들 수 있는지를 결정합니다.
flex-shrink: 0은 줄어들지 않음. 공간이 부족해도 요소 크기가 그대로 유지됩니다.
flex-shrink: 1은 기본 값이며, 요소가 공간에 맞게 비율대로 줄어듭니다.
flex-shrink: 2는 다른 요소들보다 2배 더 많이 줄어듭니다.
flex basis
flex-basis는 요소의 기본 크기를 정합니다.
flex-basis는 설정한 박스의 사이즈에 상관없이, 모든 박스는 동일한 비율로 크기가 조정됩니다.