Flex简写属性使用全攻略

一分耕耘，一分收获！既然打开了这篇文章《flex简写属性用法详解》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

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%;

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

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

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

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

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

注意事项

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

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

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。