flex-grow, flex-shrink, flex-basis 이 세가지 속성들에 대해 MDN을 참고하여 작성한 글입니다.
flex-grow, flex-shrink, flex-basis
위 속성들은 보통 따로 사용하지 않고, 축약형으로 세가지가 동시에 사용된다. 사용방법은 아래와 같은 순서를 따르면 된다.
flex: flex-grow값 flex-shrink값 flex-basis값-
flex-grow: 아이템들이 메인 방향으로 늘어나 여백을 채우는데 늘어나는 그 비율에 대한 속성
기본값은 0.
양수값을 넣으면 그 숫자의 비율로 여백 부분을 나눠 가진다. 모든 아이템이 동일하게 여백을 나눠가지게 하려면 모두 같은 값을 사용하면 된다.(보통 1을 사용한다.) -
flex-shrink: 공간이 부족할 때, 각 아이템의 사이즈를 메인 방향을 따라 얼마나 줄일 것인지에 대한 속성
기본값은 1.
양수값을 넣으면 숫자의 비율에 따라 아이템의 *크기가 작아진다.
브라우저가 flex container 안에 각 아이템을 flex-basis값에 따라 배치할 때 container가 아이템들의 크기보다 작은 경우 이 속성을 계산한다.
값이 0이면, 축소되지 않으므로 overflow가 일어난다.
-
flex-basis: 아이템의 기본 크기를 결정하는 속성
기본값은 auto.
크기가 정의된 아이템은 그 크기 값을, 크기가 정의되지 않은 경우에는 콘텐츠 크기만큼을 사용한다.
공간을 나눌 때 flexbox가 아이템의 정의된 크기를 무시해야 하는 경우에는 0으로 설정한다.
*아이템의 크기는 메인 방향이 row일 때는 width, column일 때는 height을 말한다.
(+) flex-grow의 값을 음수로 적거나 flex-shirnk의 값을 음수로 적으면 두 속성이 똑같은 결과를 보여주지 않을까?
결론부터 말하자면 같지 않다.
모자란 사이즈에 따라 아이템의 크기를 줄일 때, flex shrink의 값이 아이템의 기본 크기에 곱해진다. 그리고 그 값에 비례해 아이템이 얼마나 줄어들지 정해진다.
그러나 flex-grow의 경우 아이템들이 배치되고 남은 container 크기(여백)를 분배받은 값에 따라 사이즈를 늘려 채운다.
또, flexbox는 아이템이 크기가 0이 되지 않도록 보호한다. 최대한 줄여도 그 아이템의 min-content 사이즈까지밖에 줄일 수 없다.
flexbox에 대해 가장 이해하기 쉽게 설명해준 자료 링크!
https://studiomeal.com/archives/197
