1. 자식 요소에 적용해야하는 Flexbox 속성들

• 앞서 부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있다면, 자식 요소에게 적용해야 하는 속성인 flex 는 요소가 차지하는 공간과 관련이 있다.

1) flex 속성의 값

• 기본값

flex: 0 1 auto /* grow shrink basis */

.item {
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}

2) flex-grow

• grow(팽창 지수) 는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지를 의미한다.
• 팽창 지수는 자식 요소의 grow값 / 자식 요소들의 grow값의 총합 의 비율로 공간을 가진다.
• 팽창 지수의 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지하게 됨
• box1 : box2 : box3 = 1 : 2 : 1

.box {
    flex-grow: 1;
}
.box2 {
    flex-grow: 2;
}
.box3 {
    flex-grow: 1;
}

• box1 : box2 : box3 = 1 : 3 : 2

.box1 {
    flex-grow: 1;
}
.box2 {
    flex-grow: 3;
}
.box3 {
    flex-grow: 2;
}

3) flex-shrink

• shrink(수축 지수)는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아진다(비율이 클수록 더 많이 줄어듬). 그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 권장하지 않는다. 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장한다. flex-shrink 속성은 width 나 이후 설명할 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문이다. flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 상관없다.

4) flex-basis

• basis(기본 크기) 는 자식 박스가 flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기이다. flex-grow 가 0일 때, basis 크기를 지정하면 그 크기는 유지된다.
• width와 flex-basis 를 동시에 적용하는 경우, flex-basis 가 우선된다.
• (flex-basis 를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우, width 대신 max-width 를 쓸 수 있다.
• flex-basis : auto 일때는 여백의 너비의 비율이 맞아지지만, flex-basis : 0일때는 전체 너비가 비율에 맞게 달라진다.