flex-shrink
-
자주 쓰는 flex trickCSS 2021. 12. 29. 11:31
flex에는 flex container와 flex item이 있다. flex container로만 작업하다보면 item들을 넣을 때 컨테이너를 3분할 4분할 이런식으로 균등하게 나누어야 경우가 매우 많다. 이 때 아이템에 css width 요소만 써서 하다보면 전체 레이아웃이 변할때 박스의 변화가 예측하기 어렵게 된다. 해결법은 다음과 같다. flex속성 flex 속성은 세가지 요소로 이루어져 있다. flex-basis flex-grow flex-shrink 유연한 박스의 기본 영역 flex-basis flex-basis는 Flex 아이템의 기본 크기를 설정(flex-direction이 row일 때는 너비, column일 때는 높이). 기본값 auto: 해당 아이템의 width를 사용 .item { fl..