order属性仅调整flex子元素视觉顺序，不影响dom结构、屏幕阅读器朗读、键盘导航及seo；默认值为0，数值越小越靠前，相同值时按html源码顺序排列。
flex-order 不能替代 DOM 顺序，但能调整视觉排列
写 order 值本身不会改变 HTML 中元素的实际位置或语义顺序，只影响 Flex 容器内项目的渲染顺序。屏幕阅读器、SEO 和键盘导航仍按源码顺序读取——这点常被误认为“重排就等于逻辑重排”。
-
order默认是0，值越小越靠前；负数（如-1）比0更优先 - 不要用
order去“修复”结构混乱的 HTML，它不是语义重构工具 - 移动端常用来把操作按钮（如“立即购买”）视觉前置，但必须确保其在 DOM 中仍处于合理语义位置（比如紧随商品标题后）
- 多个同
order值的项目，按源码顺序排列——别指望浏览器自动按内容重要性排序
flex-grow + flex-shrink 组合决定空间争夺优先级
所谓“优先级”，本质是容器剩余空间如何分配、空间不足时谁先被压缩。这不是靠某个开关控制，而是 flex-grow 和 flex-shrink 的数值博弈。
-
flex-grow: 2的项会比flex-grow: 1的项多分一倍剩余空间，但前提是所有项flex-shrink: 1（默认）且没设min-width - 想让某项“绝对不收缩”，必须显式写
flex-shrink: 0，仅设flex-grow: 0不够——后者只管扩张，不管压缩 - 文字区域常设
flex: 0 1 auto（即不扩张、可收缩、按内容宽），而操作按钮设flex: 0 0 fit-content防挤压 - 注意：
flex: 1等价于flex: 1 1 0%，其中0%会让浏览器忽略内容尺寸，强行拉伸——这在按钮上容易导致文字溢出
flex-basis 是真正的“优先宽度锚点”，不是 width 的别名
flex-basis 在 Flex 计算中优先级高于 width，但它的值不是最终宽度，只是算法起点。很多人写 width: 200px 后加 flex-basis: 300px，结果发现还是 200px——因为浏览器按规范忽略冲突的 width。
- 要让
flex-basis生效，避免混用width；若必须保留width，用max-width或min-width辅助约束 - 响应式三栏常用
flex-basis: calc(33.333% - 12px)，但必须配合box-sizing: border-box和父容器明确宽度，否则百分比无参照 -
flex-basis: auto表示按内容宽或width值计算，但一旦设了flex-shrink: 0，auto就退化为“宁撑破也不缩” - Safari 15.6 之前对
calc(100% / 3)有四舍五入误差，稳妥写法是flex: 0 0 calc(33.3333% - 2 * 8px / 3)（假设gap: 8px）
流式布局中“优先级”最容易被忽略的是 min-width 和 white-space
再精细的 flex 配置，也会被一行长 URL、未断行英文或图片原始尺寸击穿。这些不是 Flex 的 bug，而是 CSS 流式规则的基本前提没守牢。
- 所有 Flex 子项都应设
min-width: 0，否则浏览器按“最小内容宽”（比如一个 30 字符的 base64 字符串）撑开容器，flex-wrap: wrap直接失效 - 含文本的项必须配
white-space: normal和word-break: break-word，否则flex-basis再准也拦不住单个单词溢出 - 图片务必设
max-width: 100%+height: auto，否则原始尺寸 > 容器宽时，Flex 不会自动缩放，只会横向滚动 - 使用
gap替代margin控制间距，否则最后一项的margin-right会在换行时变成行尾空白，破坏对齐
实际效果是否稳定，不取决于你写了多少 flex 属性，而在于是否每个子项都主动放弃了“撑爆容器”的默认权利。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
