본문 바로가기
CSS

css flex 한방정리

by 영감은어디에 2024. 4. 28.

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

flex-shrink CSS property는 flex-item 요소의 flex-shrink 값을 설정하는 속성입니다. 만약 flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-co

developer.mozilla.org