자식요소에 사용며, flex item 들의 크기를 지정한다.
width, height와 다른점은 axis 방향에 따라 달라진다는 것과 내부의 컨텐츠에 따른 유연한 크기이다.
기본값은 auto이며 auto일 때는 width, height 값을 사용합니다.
만약 flex-basis 값이 적용되어 있다면 width, height 값은 무시된다.
0외에 다른 상수값을 지정할 수 없다 !!
자식요소에 사용하며, flex-grow에 반대되는 개념으로 flex-basis의 값에서 더 줄어들어도 되는지 지정하는 값이다.
크기를 고정하거나 줄이는 역할을 한다.
0의 값을 사용할 경우 컨테이너의 크기가 줄어도 값은 고정됨.
마이너스 숫자는 받아들이지 않으며 1은 기본값임.
부모에 flex-wrap: wrap; 속성이 있는 경우 적용되지 않는다.
자식요소에 사용하며, flex-basis의 값에서 더 늘어나도 되는지 지정하는 값으로, 할당된 값에 따라 자신을 감싸는 컨테이너의 공간을 할당하도록 한다.
flex-grow : 1 → 자식 요소들이 모두 동일한 크기의 공간을 할당받는다.
flex-grow : 2 → 특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 두배의 여백 공간을 할당받는다. 만약, 자식요소들의 컨텐츠 크기가 존재한다면 그 컨텐츠의 넓이에 따라 할당받는 값이 달라진다.
flex-basis:0을 주게 되면 여백 공간이 아니라 전체 공간을 분할한다.
성배그리기