Flex
CSS의 'Flex'는 유연한 박스 모델을 생성하기 위해 사용되는 레이아웃 속성입니다.
HTML의 여려 박스들을 쉽게 정리하기 위해 사용합니다.
class container 안에 있는 모든 박스에 flex를 적용하는 코드입니다.
flex-grow
flexbox 레이아웃에서 유연한 크기 조절을 위해 사용되는 속성 중 하나 입니다.
이 속성은 자식 요소에 적용되며, 남은 공간을 얼마나 차지할지를 결정합니다.
flex-grow 속성값은 양의 정수입니다. 값이 클수록 해당 요소가 남은 공간을 많이 차지하게 됩니다.
'flex-grow: 0;'이면 해당 요소는 남은 공간을 차지하지 않고 초기의 크기를 유지합니다.
flex-grow를 사용한 예시 입니다.
flex-grow 속성 값이 1이기 때문에 사용 가능한 공간을 동일한 비율로 자식 요소인 .item에게 분배합니다.
마우스로 윈도우 크기를 조정하면 크기에 맞춰서 파란 네모 박스의 크기도 변합니다.
각각의 item들에 flex-grow값을 다르게 하면 그 비율에 맞게 빈 공간을 채웁니다.
위 코드에서 flex-grow는 1:1:0:2:1 이며, 그 비율에 맞춰 빈 공간을 차지합니다.