[HTML/CSS]Flexbox: 헷갈리기 쉬운 flex-basis, flex-grow, flex-shrink 속성 정리

css에서 정말 자주 사용하는 flex!

오늘은 flex 속성 1편!

조금 헷갈리는 flex-basis, flex-grow, flex-shrink 속성의 개념 정리하기

 

CSS Flexbox 레이아웃에서 flex-basis, flex-grow, flex-shrink는

flex 아이템의 크기와 여유 공간 분배를 조절하는 데 사용되는 세 가지 중요한 속성이다.

 

flex-basis

flex-basis는 flex 아이템의 기본 크기를 설정

이 크기는 아이템의 내용물에 상관없이 설정할 수 있으며, width나 height와 유사하게 작동합니다.

초기값(default value)은 auto

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

 

 

flex-grow

flex-grow는 flex 컨테이너 내에서 여유 공간을 어떻게 나눌지를 결정하는 속성

값이 클수록 해당 아이템이 더 많은 공간을 차지. 초기값(default value)은 0

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

 

flex-shrink

flex-grow와 반대로,  flex-shrink는 flex 컨테이너가 작아질 때 아이템이 어떻게 축소될지를 결정하는 속성

값이 클수록 해당 아이템이 더 많이 축소. 초기값(default value)은 1

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

 

 

 

 

- 끝 -