直接复制浏览器样式会漏掉flex公共类，因为devtools只显示渲染后的“结果态”css（如flex: 1 1 0%），不识别项目约定的原子类（如.flex-center）；提取需人工识别重复模式并批量重构。
为什么直接复制浏览器样式会漏掉 Flex 公共类？
你从 Chrome DevTools 的 Styles 面板复制出来的 CSS，通常是内联计算后、带浏览器前缀、含冗余声明的“结果态”代码——比如 flex: 1 1 0% 或 -webkit-box-flex: 1，但不会自动提取出像 .flex-row、.flex-center 这类可复用的原子类。根本原因是 DevTools 不知道你的项目约定，它只管渲染结果。
真正要提取公共类，得靠人工识别模式 + 快捷键批量重构，而不是“复制即用”。
- 常见错误：把
display: flex; justify-content: center; align-items: center;每次都重写，而不是抽成.flex-center - 典型场景：多个按钮、卡片、表单控件都需要居中对齐或水平排列
- 关键判断点：当同一组声明在 3 个以上地方重复出现，就该提成类了
用 Ctrl+D 和多光标快速定位并统一提取 Flex 类
假设你在多个地方写了 display: flex; flex-direction: column;，想统一替换成 .flex-col：
- 先在任意一处写好目标类定义（如
.flex-col { display: flex; flex-direction: column; }） - 回到使用处，双击选中
display: flex，按Ctrl+D逐个跳转匹配项（注意：只匹配完整单词，避免误中inline-flex） - 确认所有目标行都被高亮后，按
Ctrl+Shift+L一次性选中全部匹配项 - 删掉整段声明，输入
class="flex-col"（或用 Emmet 输入.flex-col→ Tab 展开） - 如果需保留原有 class，用
Ctrl+Shift+Right扩展到引号内，再补逗号和空格
别忽略 flex-shrink 和 flex-basis 的隐式行为差异
提取类时最容易踩坑的是把 flex: 1 和 flex: 0 1 auto 当作等价——它们在容器空间不足时表现完全不同。
-
flex: 1等价于flex: 1 1 0%，会收缩；而flex: 0 1 auto不会收缩（flex-shrink: 1但flex-basis: auto） - 如果你抽的类叫
.flex-1，必须明确文档它是“强制撑满且可收缩”，还是“仅分配剩余空间” - 建议公共类命名带语义：
.flex-fill（对应flex: 1）、.flex-auto（对应flex: 0 1 auto），避免歧义 - VSCode 的 CSS IntelliSense 对这类自定义类无提示，得靠注释或 README 补充说明
保存时自动格式化可能破坏手动排版的 Flex 类列表
启用 editor.formatOnSave 后，Prettier 默认会把多行 class 列表压成一行，比如 class="flex-row flex-wrap items-center justify-between" → 这不利于后续用快捷键 Ctrl+D 精准选中单个类名。
- 解决办法：在 VSCode 设置 JSON 中加这条规则：
"prettier.htmlWhitespaceSensitivity": "ignore" - 或者改用换行分隔：
class="flex-row flex-wrap items-center justify-between"
—— Prettier 会保留这种格式 - 注意：某些旧版 Prettier 对 HTML class 属性的换行支持不稳定，建议用 v3.0+ 版本
Flex 公共类不是抄完就完事，关键是命名是否反映真实行为、是否能在不同容器尺寸下稳定生效——这两点没法靠快捷键自动判断，得你盯着 DevTools 的 computed 值手动验证一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
