[HTML/CSS] Flexbox 자식 요소

flex 속성의 값

flex: grow shrink basis
flex: 0 1 auto; /* 기본 값 */

• grow(팽창 지수) 는 요소의 크기가 늘어나는 비율
• shrink(수축 지수) 는 요소의 크기가 줄어드는 비율
• basis(기본 크기) 요소의 기본 크기(초기 값)

기본 값의 경우 왼쪽에서부터 오른쪽으로 콘텐츠의 크기가 고정되어 배치됩니다.
각 속성 값을 나눠서 적용할 수도 있습니다.

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

grow

<main>
  <div id="box1" class="box">box1</div>
  <div id="box2" class="box">box2</div>
  <div id="box3" class="box">box3</div>
</main>

#box1 {
    flex-grow: 1;
}

box1 : box2 : box3 = 1 : 0 : 0
box1의 크기만 변하고 box2 box3은 고정된다.

shrink을 사용하면 정확한 크기 값을 예측하기 어려우므로 추천하지 않는 방식입니다.

basis

basis(기본 크기): 비율이 변하기 전에 가지는 기본크기입니다.

#box1 {
    flex-grow: 1;
    flex-basis: 150px;
}
#box2 {
    flex-grow: 1;
}
#box3 {
    flex-grow: 1;
}

basis가 0일 때와 auto일때 차이

flex-basis MDN
의문 : basis_ auto 보다 0이 크기가 작은 데 정확히 어떤 차이가 있는걸까..?

width & flex-basis

• width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
• 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
• (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.
  max-width MDN

max-width CSS 속성은 요소의 최대 너비를 설정합니다. max-width는 width 속성의 사용값이 자신의 값보다 커지는걸 방지합니다.

max-width가 width를 재설정하고, min-height가 max-width를 재설정합니다.