[BASIC]flex 2

자식 요소 flexbox

.parents .child {
    flex: flex: 0 1 auto /*grow shrink basis*/
}

flex

grow(팽창 지수): 늘어날 때 얼마나 늘어날지
shrink(수축 지수): 줄어들 때 얼마나 줄어들지
basis(기본 크기): 팽창, 수축과 상관업는 기본 크기

---

grow

grow는 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율

자식 요소의 grow값 / 자식 요소들의 grow값의 총합

shrink

비율이 클수록 더 많이 줄어드는

flex-grow 속성과 flex-shrink 속성을 같이 사용 x

비율로 레이아웃을 지정할 경우 flex-grow 속성 또는

flex-grow: 1 auto;

와 같이 grow 속성에 변화

width, flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기 힘듬

flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1

---

basis

늘어나거나 줄어들기 전에 가지는 기본 크기

flex-grow 가 0, basis 크기를 지정하면 크기 유지

auto 값을 가지지 않은 flex-basis와 width 값을 동시에 적용한 경우 flex-basis가 우선

콘텐츠가 많아 자식 박스가 넘치는 경우 width가 정확한 크기를 보장하지 않음

(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비 max-width 사용