弹性盒与网格
用于控制弹性项目如何伸缩的工具类。
| 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-(<custom-property>) | flex: var(<custom-property>); |
flex-[<value>] | flex: <value>; |
使用 flex-<number> 工具类如 flex-1 来让弹性项目根据需要伸缩，忽略其初始尺寸：
<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>使用 flex-initial 允许 flex 项目收缩但不扩展，同时考虑其初始大小：
<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>使用 flex-auto 允许一个 flex 项目根据其初始尺寸进行伸缩：
<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>使用 flex-none 来阻止弹性项目（flex item）的伸缩：
<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>Use the flex-[<value>] syntax to set the flex 简写属性 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.
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.