Flex Shrink

Flex Shrink (flex-shrink)

flex 항목이 공간이 부족할 때 얼마나 줄어들 수 있는지 정해 주는 유틸리티예요. 항목이 컨테이너보다 커질 때 넘치지 않도록 압축하는 정도를 조절할 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

shrink flex-shrink: 1;

shrink-<number> flex-shrink: <number>;

shrink-[<value>] flex-shrink: <value>;

shrink-(<custom-property>) flex-shrink: var(<custom-property>);

flex 항목이 줄어들도록 하기 (Allowing flex items to shrink)

shrink을 사용하면 flex 항목이 필요할 때 줄어들 수 있어요.

01 02 03

<div class="flex ...">
  <div class="h-14 w-14 flex-none ...">01</div>
  <div class="h-14 w-64 shrink ...">02</div>
  <div class="h-14 w-14 flex-none ...">03</div>
</div>

항목이 줄어들지 못하게 하기 (Preventing items from shrinking)

shrink-0을 사용하면 flex 항목이 줄어들지 못하게 막을 수 있어요.

01 02 03

<div class="flex ...">
  <div class="h-16 flex-1 ...">01</div>
  <div class="h-16 w-32 shrink-0 ...">02</div>
  <div class="h-16 flex-1 ...">03</div>
</div>

커스텀 값 사용하기 (Using a custom value)

shrink-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 flex shrink 계수를 설정할 수 있어요.

<div class="shrink-[calc(100vw-var(--sidebar))] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 shrink-(<custom-property>) 문법을 사용할 수도 있어요.

<div class="shrink-(--my-shrink) ...">
  <!-- ... -->
</div>

이것은 shrink-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

반응형 디자인 (Responsive design)

flex-shrink 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

<div class="shrink md:shrink-0 ...">
  <!-- ... -->
</div>

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.