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
常见简写形式
1. flex: 1等价于：
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
常用于让子项平均占满剩余空间，特别在等分布局中很实用。
立即学习“前端免费学习笔记（深入）”；
2. flex: 0 1 auto这是很多浏览器的默认值，表示不放大，可缩小，基础尺寸为内容大小。
等价于：
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
该项目将按比例 2 放大，比 flex: 1 的项目占据更多空间。
4. flex: 0 0 100px表示不放大、不缩小，基础大小为 100px，适合固定尺寸项。
注意事项
使用简写时，如果只写一个值，需注意其类型：
- 单个无单位数字 → 被视为 flex-grow（如 flex: 1）
- 单个带单位的值（如 200px）→ 被视为 flex-basis
- 两个数值时，第一个是 grow，第二个是 shrink，basis 取 auto
基本上就这些，掌握常见组合就能高效布局。
