Flexbox 和 Grid
flex-grow
用于控制弹性项目如何增长的工具。
类 | 样式 |
---|---|
grow | flex-grow: 1; |
grow-<number> | flex-grow: <number>; |
grow-[<value>] | flex-grow: <value>; |
grow-(<custom-property>) | flex-grow: var(<custom-property>); |
示例(Examples)
¥Examples
允许项目增大(Allowing items to grow)
¥Allowing items to grow
使用 grow
允许弹性项目增长以填充任何可用空间:
¥Use grow
to allow a flex item to grow to fill any available space:
<div class="flex ..."><div class="size-14 flex-none ...">01</div><div class="size-14 grow ...">02</div><div class="size-14 flex-none ...">03</div></div>
根据因子增加项目(Growing items based on factor)
¥Growing items based on factor
使用 grow-<number>
工具(如 grow-3
)使弹性项目根据其增长因子按比例增大,使它们能够相对于彼此填充可用空间:
¥Use grow-<number>
utilities like grow-3
to make flex items grow proportionally based on their growth factor, allowing them to fill the available space relative to each other:
<div class="flex ..."><div class="size-14 grow-3 ...">01</div><div class="size-14 grow-7 ...">02</div><div class="size-14 grow-3 ...">03</div></div>
防止项目增大(Preventing items from growing)
¥Preventing items from growing
使用 grow-0
来防止弹性项目增长:
¥Use grow-0
to prevent a flex item from growing:
<div class="flex ..."><div class="size-14 grow ...">01</div><div class="size-14 grow-0 ...">02</div><div class="size-14 grow ...">03</div></div>
使用自定义值(Using a custom value)
¥Using a custom value
使用 grow-[<value>]
语法 根据完全自定义的值设置 flex grow factor:
<div class="grow-[25vw] ..."> <!-- ... --></div>
对于 CSS 变量,还可以使用 grow-(<custom-property>)
语法:
<div class="grow-(--my-grow) ..."> <!-- ... --></div>
这只是简写,用于 grow-[var(<custom-property>)]
它会自动为你添加 var()
函数。
响应式设计(Responsive design)
¥Responsive design
在 flex-grow
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="grow md:grow-0 ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。