flex: 1 0 200px 严格按顺序解析为 flex-grow: 1（可伸展）、flex-shrink: 0（不收缩）、flex-basis: 200px（主轴初始尺寸200px，优先级高于width）。

flex 属性的三个值分别对应 flex-grow、flex-shrink 和 flex-basis，顺序固定，不能调换。搞错顺序或省略时默认补值，容易导致布局意外收缩或撑满。

flex: 1 0 200px 这类三值写法怎么解析？

必须按 flex-grow flex-shrink flex-basis 严格顺序理解：

• 1 是 flex-grow：容器有剩余空间时，该项目按比例 1 占用（与其他 flex-grow > 0 的项目一起瓜分）
• 0 是 flex-shrink：空间不足时，该项目完全不缩小（哪怕文字溢出或内容被裁剪）
• 200px 是 flex-basis：主轴初始尺寸设为 200px，优先级高于 width；若父容器是 flex-direction: column，则控制的是高度

为什么 flex: 1 和 flex: 1 1 0% 效果不同？

表面都“撑满”，但底层行为差异明显：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• flex: 1 等价于 flex: 1 1 0% —— flex-basis 是 0%，意味着项目初始尺寸为 0，所有空间都靠 flex-grow 拉伸出来
• flex: 1 1 auto（如 flex: auto）中 flex-basis: auto 会先取元素自身内容宽度（比如文字长度、图片固有宽），再分配剩余空间
• 实际影响：含文字的 flex: 1 项可能比 flex: auto 更“贪吃”空间，尤其在多列布局中易挤压其他项

常见简写值对应的完整展开容易踩坑

这些快捷写法背后隐含默认值，一不留神就违背直觉：

• flex: 0 → flex: 0 1 0%：不放大，但会缩小（flex-shrink: 1），内容多时可能被压缩变形
• flex: none → flex: 0 0 auto：既不放大也不缩小，尺寸由内容或 width/height 决定，适合固定尺寸侧边栏
• flex: initial → flex: 0 1 auto：最接近“重置”行为，但注意它仍允许收缩，不是完全锁定尺寸
• 漏写 flex-shrink（如只写 flex: 1 200px）→ 解析为 flex: 1 1 200px，不是你想要的“不收缩”

真正关键的不是记住所有等价写法，而是每次写 flex 时心里默念一遍：我要它在有空余时怎么涨？挤不下时怎么缩？起手尺寸是多少？这三个问题没想清，光套快捷值迟早掉坑里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！