flex-basis: 0 是强制归零起点，非设宽度；它使子项初始占位为0，后续按flex-grow均分剩余空间，避免因内容宽度差异导致不等宽。
flex-basis: 0 是强制归零起点，不是“设宽度”
很多人写 flex-basis: 0 是为了“让子项从零开始分空间”，但误以为它等价于 width: 0 —— 实际上，flex-basis: 0 只是告诉 Flex 布局：“这个项目的初始占位是 0，别管它里面有没有文字、图片或内边距”。浏览器后续才按 flex-grow 分配剩余空间。如果漏掉这一步，flex-grow: 1 仍会从内容宽度出发伸展，导致宽窄不一。
常见错误现象：
两个 div 都设了 flex-grow: 1，但一个含短文本（内容宽 60px），一个含长段落（内容宽 280px），结果后者明显更宽 → 根本原因是默认 flex-basis: auto，没被覆盖。
-
flex-basis: 0比flex-basis: 0%更稳妥，尤其在旧版 Safari 中；0px也可用，但规范推荐无单位的0 - 若子项含
img或span等内联元素，还需加min-width: 0，否则浏览器可能按固有尺寸撑开 - 同时写了
width和flex-basis，后者会覆盖前者 ——flex-basis优先级更高
flex-grow: 1 + flex-basis: 0 才真能等宽
只写 flex-grow: 1 不等于“均分容器”，它只是“平分剩余空间”。而剩余空间 = 容器宽度 − 所有子项的 flex-basis（或内容宽）之和。只有当所有子项的 flex-basis 一致且为 0 时，flex-grow 的数值比才真正决定最终宽度比。
示例：容器宽 600px，三个子项都设 flex: 1 1 0（即 flex-grow: 1; flex-shrink: 1; flex-basis: 0）→ 初始总宽为 0 → 剩余空间 600px → 各得 200px。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 写成
flex: 1看似简洁，但它是flex: 1 1 0%或flex: 1 1 auto的简写，行为不统一，建议显式写flex: 1 1 0 - 若需禁止收缩（比如导航栏固定高度区域），改用
flex: 1 0 0，避免小屏下被压缩 -
flex-grow: 2和flex-grow: 4效果等同于1和2，只看比值，不看绝对值
为什么加了 flex-basis: 0 还是不等宽？检查这些干扰项
即使正确设置了 flex-basis: 0 和 flex-grow: 1，仍可能出现宽度偏差。这不是 Flex 失效，而是其他样式在底层干预了计算。
- 子项内有
white-space: nowrap+ 长文本 → 强制不换行，突破flex-basis起点，需配合overflow: hidden或text-overflow: ellipsis - 父容器未设明确
width，或受浮动、position: absolute影响，导致可用主轴空间不确定 - 子项含
margin、padding或边框，且未设box-sizing: border-box→ 视觉宽度 ≠ Flex 计算宽度 - 某些场景下（如表格内嵌 Flex），外层 display 类型会限制主轴尺寸传递，需检查 computed styles 中的
flex-basis实际值
响应式中动态改 flex-grow，必须同步重置 flex-basis
在媒体查询里把桌面端的 .sidebar { flex-grow: 1 } 改成移动端的 flex-grow: 0，看似合理，但若没同步处理 flex-basis 和 flex-shrink，很可能出问题：比如子项含图片，flex-grow: 0 后仍被 flex-shrink: 1（默认值）压缩变形。
- 移动端切单列时，推荐整套重写：
flex-direction: column; width: auto; flex: 0 0 auto;，而非只调flex-grow - IE10/11 对
flex: 2 0 0%解析不稳定，降级写法应拆开：flex-grow: 2; flex-shrink: 0; flex-basis: 0%; - 调试时打开 DevTools 的「Layout」面板，勾选「Flexbox overlay」，能直接看到每个子项的基线、剩余空间分配量和实际伸缩结果
flex-basis 是否真正归零 —— 它不是可选项，而是比例分配的前提。一旦内容宽度参与了初始计算，flex-grow 就只是在“补差”，不是“重分”。 
