Flexbox & Grid
flex
用于控制弹性项目如何增长和收缩的实用程序。
| 类 | 样式 |
|---|---|
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-<number> 实用程序（如 flex-1）来允许弹性项目根据需要增长和收缩，忽略其初始大小
01
02
03
<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 来允许弹性项目收缩但不增长，同时考虑其初始大小
01
02
03
<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 来允许弹性项目增长和收缩，同时考虑其初始大小
01
02
03
<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 来阻止弹性项目增长或收缩
01
02
03
<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>使用自定义值
使用 flex-[<value>] 语法 来设置flex 简写属性基于完全自定义的值
<div class="flex-[3_1_auto] ..."> <!-- ... --></div>对于 CSS 变量，您也可以使用 flex-(<custom-property>) 语法
<div class="flex-(--my-flex) ..."> <!-- ... --></div>这只是 flex-[var(<custom-property>)] 的简写，它会自动为您添加 var() 函数。
响应式设计
前缀一个 flex 实用程序 与一个断点变体（如 md:）一起使用，仅在中等 屏幕尺寸及以上应用该实用程序
<div class="flex-none md:flex-1 ..."> <!-- ... --></div>在 变体文档 中了解有关使用变体的更多信息。
