Flex简写属性使用详解

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《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

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

理论要掌握，实操不能落！以上关于《Flex简写属性使用详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！