autoprefixer不会自动为display: flex加-webkit-flex等前缀，因其严格依据browserslist配置和caniuse数据判断是否需前缀；若配置过新（如仅"last 2 versions"），则Chrome/Safari最新版已原生支持，故不生成前缀。
PostCSS插件（主要是 autoprefixer）不是“有属性就加前缀”，它严格按 browserslist 配置 + caniuse 数据决定是否加、加哪些、加到哪一级——绝大多数“没加前缀”问题，根源是配置与目标不匹配，而非插件失效。
为什么写了 display: flex 却没生成 -webkit-flex
最常见原因是 browserslist 配置太新，导致 autoprefixer 查完 caniuse 后判定：当前目标浏览器已原生支持，无需前缀。
- 例如只写
"last 2 versions"，Chrome/Safari 最新版早已支持flex，就不会输出任何前缀 - 要兼容 iOS Safari 10 或 Android WebView 4.4，必须显式包含：
"iOS >= 10"、"Android >= 4.4" - 运行
npx browserslist看实际生效的浏览器列表；再跑npx autoprefixer --info确认该属性是否在处理范围内
为什么 gap、place-items 这类属性完全没前缀
这些属性在部分旧版浏览器中确实需要前缀（如 Safari 12.1 对 gap 的 -webkit-gap），但 autoprefixer 默认不加，因为它们尚未被 caniuse 标记为“需广泛前缀”的稳定特性。
-
gap在 Flex 布局中直到 Safari 14.1 才原生支持，但autoprefixer目前仍将其视为“有限支持”，默认不补-webkit- -
place-items在 Safari 中需拆解为align-items+justify-items，这不是前缀问题，而是语法降级，autoprefixer不处理 - 这类情况不能依赖
autoprefixer，需手动 fallback 或用postcss-preset-env配合stage: 0尝试启用实验性补全
为什么 Less/Sass 文件里的样式没加前缀
autoprefixer 只处理标准 CSS 字符串，不识别预处理器语法。如果构建链路顺序错或未打通，它根本收不到有效输入。
立即学习“前端免费学习笔记（深入）”；
- Webpack 中，
postcss-loader必须在less-loader之后、css-loader之前；错误写法['less-loader', 'postcss-loader']会让postcss-loader收到未编译的 Less 代码，直接报错或静默跳过 - Vite 默认支持，但若你在
vite.config.ts中显式配置了css.postcss，可能意外覆盖默认 PostCSS 流程 - 所有手动写的前缀（如
display: -webkit-flex）会触发autoprefixer的“接管检测”，整条声明被跳过——必须清空所有自定义前缀和 Mixin
为什么动态插入的 CSS（JS 注入、<style> 内联）没前缀
autoprefixer 是构建时工具，只处理源文件（.css、.pcss、.less 等），不处理运行时字符串。
-
document.createElement('style')插入的内容、el.innerHTML = '...'拼接的样式，构建时不可见，autoprefixer完全无法触达 - Vue 的
<style lang="postcss">显式声明才走 PostCSS；普通<style>块依赖 loader 链路是否含postcss-loader - 想让 JS 动态样式带前缀，唯一可靠方式是：把规则写进独立
.css文件，用import引入，确保它经过完整构建流程
真正容易被忽略的是：你写的每一条 CSS 规则，都必须同时满足三个条件才会被加前缀——语法是标准 CSS、目标浏览器确实需要该前缀、且该文件真实流经 postcss-loader + autoprefixer 处理链。少一个，就“看不见前缀”。
