VSCode不内置Flexbox速查表，但可通过正确配置实现display:flex等属性的精准补全；关键在于语言模式为CSS、启用"css.suggest.advanced":true、"editor.quickSuggestions":{"strings":true}，且文件为.css后缀或标签内。
VSCode 本身不内置 Flexbox 速查表（Cheatsheet），但能通过正确配置让 display: flex 及相关属性获得精准补全、参数提示和错误校验——关键不在“装插件”，而在语言模式、设置项和 CSS 语法上下文是否到位。
为什么输入 display: 后不弹出 flex 或 inline-flex？
这不是插件缺失，而是 VSCode 没识别当前文件为合法 CSS 上下文。常见原因包括：
- 右下角状态栏显示的是
Plain Text或PostCSS，不是CSS—— 点击它手动切换为CSS -
settings.json中未启用语义化提示："css.suggest.advanced": true缺失或设为false - 在 HTML 的
<style></style>标签内写 CSS 时，部分旧版 VSCode 不触发完整 CSS 服务 —— 建议把样式抽离到独立.css文件中编辑 - 文件扩展名不是
.css（比如误存为.txt或无后缀）
justify-content 和 align-items 参数补全不全或顺序错乱
VSCode 的 CSS 补全是按规范优先级排序的，但默认只列前几个常用值。要看到全部合法值（如 space-evenly、baseline），必须满足：
-
"editor.quickSuggestions": {"strings": true}已开启（否则属性值不提示） - 光标位于冒号后、分号前，且已输入完整属性名（例如敲完
justify-content:再按Ctrl+Space） - 不要在缩写中打断：写
jc:不会触发justify-content补全；必须写全称 -
flex-direction: column会影响justify-content和align-items的实际作用轴 —— 但补全列表不会动态变化，需靠开发者自己记住主/交叉轴已交换
Autoprefixer 自动加前缀失效，display: flex 没生成 -webkit-box 等
Autoprefixer 插件不会在编辑时实时生效，它只在保存文件时运行，且依赖两个硬性条件：
- 项目根目录存在
.browserslistrc（内容如>2%, last 2 versions, not dead），不能只靠插件开关 - CSS 文件必须是真实路径下的
.css文件，不能是 HTML 内联<style></style>或未保存的临时文档 - 插件设置里没禁用 “Run on save” —— 检查插件设置页的
Autoprefixer: Enable On Save是否勾选 - 若用了 Vite / Webpack 等构建工具，Autoprefixer 更应配在构建流程里，VSCode 插件仅作辅助
真正容易被忽略的点是：flex-wrap、gap、place-items 这类较新属性，在低版本浏览器目标下可能根本不会加前缀（比如 gap 在 IE 中完全不支持），Autoprefixer 会直接跳过——它不“强行兼容”，只按 Can I Use 数据做最小必要注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
