Flexbox & Grid
flex
플렉스 아이템의 확장 및 축소를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
flex-<number> | flex: <number>; |
flex-<fraction> | flex: calc(<fraction> * 100%); |
flex-auto | flex: 1 1 auto; |
flex-initial | flex: 0 1 auto; |
flex-none | flex: none; |
예제
기본 예제
flex-1과 같은 flex-<number> 유틸리티를 사용하면 플렉스 아이템이 초기 크기를 무시하고 필요에 따라 늘어나거나 줄어들 수 있습니다.
01
02
03
<div class="flex"> <div class="w-14 flex-none ...">01</div> <div class="w-64 flex-1 ...">02</div> <div class="w-32 flex-1 ...">03</div></div>Initial
flex-initial을 사용하면 플렉스 아이템이 초기 크기를 고려하여 줄어들 수는 있지만 늘어나지는 않도록 설정할 수 있습니다.
01
02
03
<div class="flex"> <div class="w-14 flex-none ...">01</div> <div class="w-64 flex-initial ...">02</div> <div class="w-32 flex-initial ...">03</div></div>Auto
flex-auto를 사용하면 플렉스 아이템이 초기 크기를 고려하여 늘어나거나 줄어들 수 있습니다:
01
02
03
<div class="flex ..."> <div class="w-14 flex-none ...">01</div> <div class="w-64 flex-auto ...">02</div> <div class="w-32 flex-auto ...">03</div></div>None
flex-none을 사용하면 플렉스 아이템이 늘어나거나 줄어드는 것을 방지할 수 있습니다:
01
02
03
<div class="flex ..."> <div class="w-14 flex-none ...">01</div> <div class="w-32 flex-none ...">02</div> <div class="flex-1 ...">03</div></div>커스텀 값 사용하기
flex-[<value>] 구문을 사용하세요 flex shorthand property를 완전히 커스텀한 값으로 설정하려면:
<div class="flex-[3_1_auto] ..."> <!-- ... --></div>CSS 변수를 사용하려면 flex-(<custom-property>) 구문을 사용할 수도 있습니다:
<div class="flex-(--my-flex) ..."> <!-- ... --></div>이는 flex-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a flex 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="flex-none md:flex-1 ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
