flex-grow
-
[Day 14]CSS Flex 2 (-basis, -grow, -shrink)TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 15. 23:22
1. flex-basis 말 그대로 basic하게 기본값을 정할 때 사용하며, 자식 요소에 사용한다. width와 height와 다른 점은 axis 방향에 따라 달라지며, 안에 컨텐츠에 따라 크기가 유연하게 바뀐다는 점이다. 기본 디폴트는 auto이다.(이 경우 width와 height 값을 사용) 만약 width, height 값이 적용되어 있어도 basis 속성이 사용된다면 무시된다. 2. flex-grow 자식요소에 사용 만약 flex-grow: 1이면 박스의 여백크기가 모든 자식들에게 균등하게 분배된다. 만약 자식 중 하나만 2의 값을 가지면, 다른 자식들보다 여백의 크기가 2배로 길다. 3. flex-shrink flex-shrink는 브라우저에게 요소가 최소로 줄어들 수 있는 사이즈를 알려준다..