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-(<custom-property>) | flex: var(<custom-property>); |
flex-[<value>] | flex: <value>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 flex-<number>
工具(如 flex-1
)允许弹性项目根据需要增大和缩小,忽略其初始大小:
¥Use flex-<number>
utilities like flex-1
to allow a flex item to grow and shrink as needed, ignoring its initial size:
<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)
¥Initial
使用 flex-initial
允许弹性项目收缩但不增长,考虑到它的初始大小:
¥Use flex-initial
to allow a flex item to shrink but not grow, taking into account its initial size:
<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)
¥Auto
使用 flex-auto
允许弹性项目增长和收缩,同时考虑到它的初始大小:
¥Use flex-auto
to allow a flex item to grow and shrink, taking into account its initial size:
<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)
¥None
使用 flex-none
防止弹性项目增长或收缩:
¥Use flex-none
to prevent a flex item from growing or shrinking:
<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>
使用自定义值(Using a custom value)
¥Using a custom value
使用 flex-[<value>]
语法 根据完全自定义的值设置 flex shorthand property:
<div class="flex-[3_1_auto] ..."> <!-- ... --></div>
对于 CSS 变量,还可以使用 flex-(<custom-property>)
语法:
<div class="flex-(--my-flex) ..."> <!-- ... --></div>
这只是简写,用于 flex-[var(<custom-property>)]
它会自动为你添加 var()
函数。
响应式设计(Responsive design)
¥Responsive design
在 flex
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="flex-none md:flex-1 ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。