Flexbox 和 Grid
用于控制弹性项目如何增长和收缩的工具类。
| 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-1 这样的 flex-<number> 工具类来允许弹性项目根据需要增长和收缩，忽略其初始大小：
<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 来允许弹性项目收缩但不增长，考虑其初始大小：
<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 来允许弹性项目增长和收缩，考虑其初始大小：
<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 来防止弹性项目增长或收缩：
<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.