flex 속성

flex는 자식 속성에 적용하는 속성이다. flex 속성에는 세가지 값을 지정해줄 수 있다

<grow>(팽창지수) <shrink> (수축지수) <basis> (기본크기)

grow(팽창 지수) 는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
shrink(수축 지수) 는 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지
basis(기본 크기) 는 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미한다.

자식 요소에 flex 속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용된다.

flex: 0 1 auto;

꼭 flex 속성 안에 세 가지 값을 한 번에 설정해줄 필요 없이, 다음과 같이 각 값을 따로 지정해줄 수 있다.

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;