Flex Grow
Flex Grow (flex-grow)
flex 항목이 컨테이너의 여유 공간을 얼마나 차지할지(자랄지) 정해 주는 유틸리티예요. 성장 계수(growth factor)를 이용해 항목들이 공간을 비례해서 나눠 가질 수 있어요.
출처: 문서
본문
클래스 & 스타일 (Class Styles)
grow
flex-grow: 1;
grow-<number>
flex-grow: <number>;
grow-[<value>]
flex-grow: <value>;
grow-(<custom-property>)
flex-grow: var(<custom-property>);
항목이 자라도록 하기 (Allowing items to grow)
grow를 사용하면 flex 항목이 남아 있는 모든 여유 공간을 채우기 위해 자랄 수 있어요.
01 02 03
<div class="flex ...">
<div class="size-14 flex-none ...">01</div>
<div class="size-14 grow ...">02</div>
<div class="size-14 flex-none ...">03</div>
</div>
성장 계수에 따라 자라게 하기 (Growing items based on factor)
grow-3 같은 grow-<number> 유틸리티를 사용하면 flex 항목이 성장 계수에 따라 비례적으로 자라서, 서로 상대적인 크기로 여유 공간을 채울 수 있어요.
01 02 03
<div class="flex ...">
<div class="size-14 grow-3 ...">01</div>
<div class="size-14 grow-7 ...">02</div>
<div class="size-14 grow-3 ...">03</div>
</div>
항목이 자라지 못하게 하기 (Preventing items from growing)
grow-0을 사용하면 flex 항목이 자라지 못하게 막을 수 있어요.
01 02 03
<div class="flex ...">
<div class="size-14 grow ...">01</div>
<div class="size-14 grow-0 ...">02</div>
<div class="size-14 grow ...">03</div>
</div>
커스텀 값 사용하기 (Using a custom value)
grow-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 flex grow 계수를 설정할 수 있어요.
<div class="grow-[25vw] ...">
<!-- ... -->
</div>
CSS 변수를 쓸 때는 grow-(<custom-property>) 문법을 사용할 수도 있어요.
<div class="grow-(--my-grow) ...">
<!-- ... -->
</div>
이것은 grow-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.
반응형 디자인 (Responsive design)
flex-grow 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.
<div class="grow md:grow-0 ...">
<!-- ... -->
</div>
variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.