flex-grow

Ví dụ

Cho phép các item phát triển

Sử dụng grow để cho phép một flex item phát triển để lấp đầy bất kỳ khoảng trống nào có sẵn:

<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>

Phát triển các item dựa trên hệ số

Sử dụng các tiện ích grow-<number> như grow-3 để làm cho các flex item phát triển theo tỷ lệ dựa trên hệ số phát triển của chúng, cho phép chúng lấp đầy không gian có sẵn tương đối với nhau:

<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>

Ngăn chặn các item phát triển

Sử dụng grow-0 để ngăn chặn một flex item phát triển:

<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>

Sử dụng giá trị tùy chỉnh

Use the grow-[<value>] syntax to set the flex grow factor based on a completely custom value:

<div class="grow-[25vw] ...">  <!-- ... --></div>

For CSS variables, you can also use the grow-(<custom-property>) syntax:

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

This is just a shorthand for grow-[var(<custom-property>)] that adds the var() function for you automatically.

Responsive design

Prefix a flex-grow utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.