css) display : flex , flex-grow , flex-shrink

flex-basis 로 flex항목(display:flex인 엘리먼트의 자식항목)에 크기를 지정한다.

기본값은 auto이며, flex항목에 크기가 지정되어 있다면 flex-basis는 그 크기가 된다.

flex 항목에 크기가 지정되어 있지 않다면 flex항목의 내용물의 크기가 flex-basis의 크기가 된다.

 

 

flex-grow를 양수로 지정하면 flex-basis로 지정한 크기 이상으로 크기를 가질 수 있게 된다. (주축 방향으로)

여러 항목에 flex-grow가 지정되면 각각 지정된 숫자의 비율대로 남은 공간을 차지하게 된다.

전체 크기가 500px인 flex엘리먼트 안에 100px짜리 엘리먼트가 3개 들어있다면, 남은 공간이 200px이 되는데 
첫번째 자식에게 flex-grow를 2를 설정하고 나머지 두개에 flex-grow를 1을 설정한다면, 2 : 1 : 1 의 비율로 남은 200px를 나눠서 가져가는 식이다. 따라서 첫번째 자식은 기존 100px에서 남은 공간 200px에서 2/4 만큼 크기가 커지고 나머지 두 자식은 기존 100px에서 남은 공간 200px의 1/4 씩 커진다. 결과는 200,150,150px이 된다.

 

flex-shrink는 flex항목들을 가지고 있는 container의 크기가 부족할 때 각 flex 항목들의 크기를 줄이는 방식을 결정한다.

flex-grow와 마찬가지로 양수의 값을 가지고 있고 flex컨테이너가 flex항목을 모두 감쌀만큼 크지 않다면 flex 항목은 flex-basis에 설정된 값보다 작아질 수 있다.