[CSS] Flex 1 1 auto

박세화·2023년 5월 5일

혼자 만들기

목록 보기
8/8

순서대로 <flex-grow>, <flex-shrink>, <flex-basis> 을 나타냄

flex-grow

flex-grow는 0보다 큰 값을 세팅하면 Flexible 박스로 변하면서 남은 여백을 메운다. flex-item 에 적용하는 속성!

flex-shrink

flex-shrink 속성은 공간을 넘어갈 경우에 각 아이템들을 줄이는 방법을 설정하는 것.
만약 flex-item이 부모 컨테이너보다 클 경우 shrink를 1로 설정해주면 부모 컨테이너 밖을 삐져나가지 않게 자동으로 줄어든다. 0일 경우는 신경 안쓰고 걍 튀어나옴

flex-basis

basis의 기본값은 auto. flex-item의 컨텐츠 크기에 따라 크기가 알아서 정해진다.

0개의 댓글