css flex属性如何简写flex-grow flex-shrink flex-basis

flex是flex-grow、flex-shrink、flex-basis的简写，用于简化弹性布局；常见形式如flex:1（等比占满剩余空间）、flex:0 1 auto（默认值，内容大小且可缩小）、flex:2（放大比例为2）和flex:0 0 100px（固定尺寸），单值时无单位视为grow，带单位视为basis。

CSS 的 flex 属性是一个复合属性，用于简写 flex-grow、flex-shrink 和 flex-basis 三个属性。使用简写形式可以让代码更简洁。

flex 简写语法

flex: flex-grow flex-shrink flex-basis;

这三个值可以按顺序省略，浏览器会使用默认值：

• flex-grow：定义项目的放大比例，默认为 0（不放大）
• flex-shrink：定义项目的缩小比例，默认为 1（可缩小）
• flex-basis：定义项目在分配空间前的初始主轴尺寸，默认为 auto

常见简写形式

等价于：
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

常用于让子项平均占满剩余空间，特别在等分布局中很实用。

立即学习“前端免费学习笔记（深入）”；

这是很多浏览器的默认值，表示不放大，可缩小，基础尺寸为内容大小。

知网AI智能写作

知网AI智能写作，写文档、写报告如此简单

38

查看详情

等价于：
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;

该项目将按比例 2 放大，比 flex: 1 的项目占据更多空间。

表示不放大、不缩小，基础大小为 100px，适合固定尺寸项。

注意事项

使用简写时，如果只写一个值，需注意其类型：

• 单个无单位数字 → 被视为 flex-grow（如 flex: 1）
• 单个带单位的值（如 200px）→ 被视为 flex-basis
• 两个数值时，第一个是 grow，第二个是 shrink，basis 取 auto

基本上就这些，掌握常见组合就能高效布局。

以上就是css flex属性如何简写flex-grow flex-shrink flex-basis的详细内容，更多请关注php中文网其它相关文章！