flex-grow

flex-grow는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도 를 선언해준다.

만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 된다.

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

flex-basis

flex-basis는 플렉스 아이템의 초기 크기를 지정한다.
box-sizing을 따로 지정하지 않았다면 콘텐츠 박스의 크기를 변경한다.

flex

flex는 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. flex는 flex-grow, flex-shrink, flex-basis의 단축속성이다.

⚠️ 기본적으로 플렉스 아이템은 콘텐츠의 최소 너비 미만으로 줄어들지 않는다.
min-width나 min-height값을 지정해 바꿀 수 있다.

/* 키워드 값 */
flex: auto;
flex: initial;
flex: none;

/* 값이 하나고 숫자 => flex-grow */
flex: 2;

/* 값이 하나고 length 또는 % => flex-basis */
flex: 10em;
flex: 30%;

/* 값이 2개: flex-grow | flex-basis */
flex: 1 30px;

/* 값이 2개: flex-grow | flex-shrink */
flex: 2 2;

/* 값이 3개: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

flex 속성은 한 개에서 세 개까지의 값을 지정할 수 있다.:
✔️ 값이 한 개

• <number> : flex-grow
• <length> or <percentage> : flex-basis
• none, auto, initial 중 하나를 지정할 수 있다

✔️ 값이 두 개

• <number> : flex-shrink
• <length>, <percentage> or auto : flex-basis

✔️ 값이 세 개일 경우 순서 주의
1. flex-grow : <number>
2. flex-shrink : <number>
3. flex-basis : <length>, <percentage> or auto

---

✨ 키워드 값:
✔️ initial
아이템 크기가 width, height 속성에 따라 정해짐
플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어듦
남은 공간을 채우려 늘어나지는 않음
=flex: 0 1 auto

✔️ auto
아이템 크기가 width, height 속성에 따라 정해짐
플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어듦
남은 공간을 채우기 위해 늘어남
=flex: 1 1 auto

✔️ none
아이템 크기가 width, height 속성에 따라 정해짐
컨테이너의 크기에 관계 없이 변하지 않음
=flex: 0 0 auto