flex-grow
속성이 남는 행 여백을 분배해서 채우는 방법
*꼭 4개라해서 4로 나누지 않고 그 이상으로도 나눌수 있음
flex-grow 속성이 적용되지 않거나, 속성 값이 flex-grow: "0" 인 경우 컨텐츠 너비보다 아이템들의 너비 합이 더 작으면 아이템 오른쪽 끝에 여백이 남게 됩니다.
flex-grow: 1;을 주면 영역을 나누어 빈영역을 알아서 채우게 된다
flex-shrink
속성이 레이아웃을 벗어난 아이템 너비를 분배해서 줄이는 방법
flex-shrink 속성은 "flex-wrap: wrap;" 속성을 부여한 경우 적용되지 않는다.
*꼭 4개라해서 4로 나누지 않고 그 이상으로도 나눌수 있음
그리고 "flex-shrink" 속성은 기본 값이 "1"이기 때문에 속성을 정의하지 않아도 자동으로 아이템이 축소되어 적용된다는 것을 염두해야 합니다.
자동으로 아이템 너비가 축소되지 않도록 하려면 반드시 "flex-shrink: 0;"을 아이템에 선언해야 합니다.
flex-basis
flex-basis 속성은 flex item의 기본 크기를 결정하는 속성이다. 기본값은 auto다.
width 속성에서 사용하는 모든 단위(px, %, em, rem 등)를 속성값에 사용할 수 있다. flex-basis 속성의 값을 30px이나 30%와 같이 설정하면 flex item의 크기가 고정된다.
flex: 1 1 0 ( = flex: 1)
flex-grow 속성과 flex-shrink 속성, flex-basis 속성을 축약해서 flex 속성으로 표현할 때 flex: 1 속성은 flex: 1 1 0 속성을 의미한다. 즉, flex-grow 속성의 값이 '1'이고 flex-shrink 속성의 값이 '1'이기 때문에 flex container의 크기에 따라 flex item의 크기도 커지거나 작아진다는 의미다.
출처
https://blogpack.tistory.com/863
https://heewon26.tistory.com/m/275
