Shift+Alt+F对CSS无效是因为格式化链路断裂：需确保右下角语言模式为CSS、安装Prettier等CSS格式化器、并在设置中指定"css.defaultFormatter"，否则快捷键无法触发实际格式化。
Shift + Alt + F 按了没反应，不是快捷键错了，而是你还没配好 CSS 格式化链路——语言模式、格式化器、默认设置三者缺一不可。
为什么 Shift + Alt + F 对 CSS 没反应
这个组合键只是“触发指令”，真正干活的是背后的格式化器。常见断点：
- 当前文件语言模式不是
CSS：右下角状态栏显示Plain Text或HTML？点击它手动切到CSS - 没装能处理 CSS 的格式化器：VSCode 内置的
vscode-css-languageservice只支持基础格式化；推荐装Prettier - Code formatter - 装了多个格式化器但没设默认：比如同时有 Prettier 和 Beautify，VSCode 不知道用谁，会静默失败；必须在设置里明确指定
"css.defaultFormatter"为esbenp.prettier-vscode - 快捷键被劫持：某些输入法或终端插件会吞掉
Alt + F；可在命令面板（Ctrl + Shift + P）搜 “Preferences: Open Keyboard Shortcuts”，过滤format document确认绑定
想让 flex 相关属性视觉对齐（比如冒号竖排），Prettier 不行
Prettier 明确拒绝属性值对齐——这是它的设计原则，避免空格差异污染 Git 提交。所以无论你怎么调 .prettierrc，它都不会把 display: flex; 和 flex-direction: row; 的冒号拉成一列。
真要对齐，得换工具：
立即学习“前端免费学习笔记（深入）”；
- 装插件
Align by Regex，选中 CSS 块 →Ctrl + Shift + P→ 输入 “Align by Regex” → 正则填:→ 对齐方式选Left - 或者用
Beautify替代：它支持传统对齐风格，但和团队协作冲突大，不建议混用 - 接受 Prettier 的单属性单行 + 合理换行：靠
printWidth控制行长，靠bracketSameLine控制括号位置，可读性其实不差
Flex 布局写完后，怎么快速验证 justify-content 和 align-items 效果
别反复改保存再刷新浏览器。在 VSCode 里直接用分屏联动：
-
Ctrl + \垂直拆分编辑器，左边写 HTML/CSS，右边开内置终端执行npx serve -s（或用 Live Server 插件） - 改完 CSS 后，
Ctrl + S保存 → 自动格式化（需开启Editor: Format On Save）→ 浏览器实时更新 - 关键点：确保 HTML 中的
<link rel="stylesheet" href="./style.css">路径正确，且 CSS 文件语言模式是CSS，否则格式化器不生效，flex属性也不会被校验
最容易被忽略的是：CSS 属性对齐 ≠ Flex 行为对齐。前者是视觉排版，后者依赖浏览器渲染逻辑。哪怕所有冒号都对齐了，flex: 0 0 200px 写成 flex:0 0 200px（少空格）也会让整个布局失效——格式化器不会帮你修语法错误，只管空格和换行。
