Front-End/CSS
[CSS] flex-grow, shrink, basis 정리
시니철
2024. 9. 7. 00:19
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`는 설정한 박스의 사이즈에 상관없이, 모든 박스는 동일한 비율로 크기가 조정됩니다.