flex-grow, shirink, basis

flex-grow, shirink, basis

flex-grow, shirink, basis는 flex container에 속한 flex item의 크기 비율을 결정한다. flex-grow는 container가 점유한 공간의 비어있는 곳을 채우기 위해 아이템을 늘릴 비율을 의미한다. flex-shirink는 container가 점유한 공간이 좁아 아이템의 크기를 유지할 수 없어 아이템을 줄이기 위한 비율을 의미한다. flex-basis는 container안에서 아이템이 얼마만큼 공간을 점유할지 결정하는 초기값이다. 아이템이 늘어나고 줄어날 때의 방향은 flex-direction에 의하여 결정된다.

 

다음 상황을 가정해 보자. flex container가 점유하는 노란색 공간이 있고, 청녹적의 세 박스가 flex item으로 존재한다. flex-direction은 row로 main axios는 가로이다.

노란색 빈공간이 flex container가 점유한 공간

flex-grow

flex-grow는 container가 점유한 공간을 item이 나눠 가지는 비율이다. flex-grow의 기본값은 0이다. 빈 공간을 item으로 늘려서 채우지 않는다는 것이다. flex-grow가 0이 아니라면, 아이템은 빈 공간을 채우려고 자신의 비율을 늘린다. 비율의 분모는 모든 item의 flex-grow 합이고, 아이템은 자신의 flex-grow를 분자로 하여 그 비율만큼 빈 공간을 차지한다.

 

세 아이템 중에 하나만 flex-grow가 1이고 나머지가 0이라면, 각 아이템의 비율은 1/1, 0/1, 0/1이다. 따라서 첫 번째 박스가 빈 공간을 모두 채운다. 그리고 그 공간을 채우기 위해 flex-direction 방향으로 item을 늘린다. 

다른 아이템에도 0이 아닌 flex-grow값을 줘보자. 비율대로 남은 공간을 차지하려고 할 것이다. 다음은 flex-grow 값이 순서대로 1, 2, 1이다. 비율은 1/4, 2/4, 1/4이다. 가운데 박스가 여백의 50%을 차지하기 위해 다른 아이템 보다 많이 늘어난다.

flex-shirink

flex-shirink는 flex-grow와 반대로 아이템의 원래 크기를 유지할 수 없을 정도로 공간이 좁아진 경우에 어떤 비율로 아이템을 줄일 것이냐를 나타낸다. 기본값은 1이다. 모든 아이템은 동일한 비율로 줄어든다. flex-shirink값을 0으로 변경해 보자. 아이템 크기를 유지하려고 하므로 공간을 좁게하면 줄어드는게 아니라 스크롤바가 나타난다. 

flex-shirink를 1로 변경한다면, 세 아이템은 모두 동일한 비율로 줄어든다.

파란색 박스의 flex-shirink를 1로 두고 나머지를 0으로 두면, 파란색 박스가 줄어들 것이다. 아이템의 원래 크기를 유지하기 어려운 공간에 대한 책임을 파란색 박스가 진다.

flex-basis

flex-basis는 flex item이 점유하는 초기 공간을 지정한다. 0px로 지정하면, 아이템을 유지하기 위한 최소한의 공간만을 가지려 한다. 다음은 파란색 박스의 flex-basis를 0px로 변경한 것이다. 아이템은 width를 100px로 가지고 있었는데, 이 공간은 아이템을 유지하기 위한 최소한의 공간이 아니라서 무시된다.

해당 아이템에 글자를 넣어주면, 다음과 같이 최소한의 공간을 차지하려고 한다.

그리고 width: 100px보다 더 많은 공간이 필요한 내용으로 채워도, 100px은 넘지 않는다.

즉, flex-basis가 0px인 경우의 flex item의 크기는 min(width, 콘텐츠유지를 위한 최소공간)이다.

 

다음은 flex-basis에 50% 값을 넣은 결과이다. width 100px는 무시되고, 50%을 만족시키기 위해 커진 것을 알 수 있다. flex-grow는 default 0을 유지하고 있다.

flex-basis에 auto를 넣으면, width로 설정한 값을 따라간다.

flex-grow, shirink, basis를 같이 쓰면

flex-grow, shirink, basis를 같이 쓰면 어떻게 될까? 물론, default값으로 grow 0, shirink 1, basis auto인 것을 생각하자.

 

먼저 default 세팅을 보자. flex: 0, 1, auto는 어떤 효과를 가지는가. 아이템의 width를 유지하되, 공간이 남아도 채우지 않고, 공간이 줄면 설정한 width보다 작아지게 된다.

공간이 남아도 채우지 않는다

공간이 부족하면 다같이 줄어든다.

즉, flex-basis로 설정한 값은 초기값으로 작용하고, 그다음 flex-grow, flex-shirink에 맞게 늘어나거나 줄어든다.

 

다음은 flex-basis를 20%, 30%, 50%로 적용한 것이다. grow는 0, shirink는 1이다.

이 세 아이템의 width는 100px이지만, flex-basis에 의하여 초기값이 20%, 30%, 50%로 변했고, 그다음 shirink에 의하여 줄어든 것을 알 수 있다.

 

전체적인 흐름을 다음과 같이 볼 수 있을 것이다. flex-basis에 의하여 flex item의 초기 공간이 결정되고, flex-grow와 flex-shirink에 의하여 공간이 변할 때 어떤 비율로 줄어들 것인지 결정 난다.