flex: flex-grow, shrink, basis

MDN | flex

/* Keyword values */
flex: auto;
flex: initial;
flex: none;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

flex-grow

flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받습니다. 하지만 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.

보통 flex-grow를 사용할땐, flex-shrink, flex-basis 속성을 함께 사용합니다. 그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여 flex 속성을 이용해 축약형으로 사용합니다.

 

/* <number> values */
flex-grow: 3;
flex-grow: 0.6;

 

flex-shrink

만약 flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소됩니다.

/* <number> values */
flex-shrink: 2;
flex-shrink: 0.6;

 

flex-basis

flex-basis CSS 속성은 플렉스 항목의 초기 기본 크기를 설정합니다. box-sizing으로 달리 설정하지 않는 한, 콘텐츠 상자의 크기를 설정합니다.

flex-basis: auto;
flex-basis: 0;
flex-basis: 200px;

생활코딩 | CSS 수업 - flex 3 : basis & grow & shrink