flex

Ví dụ

Ví dụ cơ bản

Sử dụng các tiện ích flex-<number> như flex-1 để cho phép một flex item tăng và giảm kích thước khi cần thiết, bỏ qua kích thước ban đầu của nó:

<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

Sử dụng flex-initial để cho phép một flex item giảm kích thước nhưng không tăng, có tính đến kích thước ban đầu của nó:

<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

Sử dụng flex-auto để cho phép một flex item tăng và giảm kích thước, có tính đến kích thước ban đầu của nó:

<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

Sử dụng flex-none để ngăn một flex item tăng hoặc giảm kích thước:

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

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

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

<div class="flex-[3_1_auto] ...">  <!-- ... --></div>

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

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

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

Responsive design

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

<div class="flex-none md:flex-1 ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.