Flex
Flex (flex)
flex 항목(flex item)이 여유 공간에 따라 어떻게 커지고 줄어들지, 그리고 초기 크기를 어떻게 취급할지를 한 번에 정해 주는 flex 단축 속성(shorthand) 유틸리티예요. flex-grow, flex-shrink, flex-basis를 한꺼번에 다루는 셈이라 가장 자주 쓰이는 유틸리티 중 하나예요.
출처: 문서
본문
클래스 & 스타일 (Class Styles)
flex-<number>
flex: <number>;
flex-<fraction>
flex: calc(<fraction> * 100%);
flex-auto
flex: auto;
flex-initial
flex: 0 auto;
flex-none
flex: none;
flex-(<custom-property>)
flex: var(<custom-property>);
flex-[<value>]
flex: <value>;
기본 예제 (Basic example)
flex-1 같은 flex-<number> 유틸리티를 사용하면 flex 항목이 초기 크기를 무시하고 필요에 따라 자유롭게 커지고 줄어들 수 있게 해요.
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을 사용하면 flex 항목이 초기 크기를 고려하면서, 커지지는 않고 줄어들기만 할 수 있어요.
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를 사용하면 flex 항목이 초기 크기를 고려하면서 커지고 줄어들 수 있어요.
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을 사용하면 flex 항목이 커지거나 줄어들지 못하게 막을 수 있어요.
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>
커스텀 값 사용하기 (Using a custom value)
flex-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 flex 단축 속성을 설정할 수 있어요.
<div class="flex-[3_1_auto] ...">
<!-- ... -->
</div>
CSS 변수를 쓸 때는 flex-(<custom-property>) 문법을 사용할 수도 있어요.
<div class="flex-(--my-flex) ...">
<!-- ... -->
</div>
이것은 flex-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.
반응형 디자인 (Responsive design)
flex 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.
<div class="flex-none md:flex-1 ...">
<!-- ... -->
</div>
variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.