css flex 한방정리

flex-grow 넓히라고 

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

---

flex-shrink 숫자 클수록 줄어듬,

0 :이면 가득 , 1 :기본값,  2 :  2배 줄어듬 

  <div style="flex-shrink: 0">3</div>

---

flex-basis 최소한은 

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

---

미리보기 https://developer.mozilla.org/ko/docs/Web/CSS/flex-shrink

flex-shrink - CSS: Cascading Style Sheets | MDN