20220414 과제

flex- basis, shrink, grow 정리

flex-basis

자식요소에 사용며, flex item 들의 크기를 지정한다. 
width, height와 다른점은 axis 방향에 따라 달라진다는 것과 내부의 컨텐츠에 따른 유연한 크기이다. 
기본값은 auto이며 auto일 때는 width, height 값을 사용합니다.
만약 flex-basis 값이 적용되어 있다면 width, height 값은 무시된다.
0외에 다른 상수값을 지정할 수 없다 !!

flex-shrink

자식요소에 사용하며, flex-grow에 반대되는 개념으로 flex-basis의 값에서 더 줄어들어도 되는지 지정하는 값이다.
크기를 고정하거나 줄이는 역할을 한다.
0의 값을 사용할 경우 컨테이너의 크기가 줄어도 값은 고정됨. 
마이너스 숫자는 받아들이지 않으며 1은 기본값임.
부모에 flex-wrap: wrap; 속성이 있는 경우 적용되지 않는다.

flex-grow

자식요소에 사용하며, flex-basis의 값에서 더 늘어나도 되는지 지정하는 값으로, 할당된 값에 따라 자신을 감싸는 컨테이너의 공간을 할당하도록 한다.
flex-grow  : 1 → 자식 요소들이 모두 동일한 크기의 공간을 할당받는다.
flex-grow  : 2 →  특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 두배의 여백 공간을 할당받는다. 만약, 자식요소들의 컨텐츠 크기가 존재한다면 그 컨텐츠의 넓이에 따라 할당받는 값이 달라진다.
flex-basis:0을 주게 되면 여백 공간이 아니라 전체 공간을 분할한다.

성배그리기