WebStorm不提供Flexbox可视化拖拽，仅支持语法提示与校验；常见“看着对、跑起来错”源于display: flex未写在父容器、align-items语义误用、缺height导致子元素不可见等，须依赖Chrome DevTools的Flexbox调试模式验证。
WebStorm 本身不提供 Flexbox 可视化拖拽或自动布局生成，所有 Flexbox 行为完全依赖你手写的 CSS 代码；它只负责高亮、提示、校验和快速补全——写错 justify-content 值不会报错，但浏览器里一定不生效。
为什么在 WebStorm 里写 Flexbox 容易“看着对、跑起来错”
常见现象是：样式写了，预览也显示了，但元素没居中、没换行、高度塌陷，或者在 Chrome 里正常，Safari 里错位。根本原因不是 WebStorm 有问题，而是它默认不强制校验 Flex 属性的语义有效性。
-
display: flex必须写在父容器上，写在子元素上毫无作用（但 WebStorm 不警告） -
align-items: center在flex-direction: column时控制的是水平居中，新手常误以为是“垂直居中” - 未设
height或min-height的父容器，配合align-items: stretch（默认值），会导致子元素高度为 0 —— WebStorm 不提示“可能不可见” -
flex-wrap: wrap缺失时，多项目超出容器宽度会溢出或挤压变形，而 WebStorm 不标记“潜在响应式断裂”
WebStorm 中必须开启的 3 个关键设置
这些不是可选项，是避免 Flex 布局失效的基础保障：
- 启用 CSS 语言级别为
CSS 3.0或更高：Settings → Languages & Frameworks → Stylesheets → CSS → Language level →CSS 3.0（否则gap、place-items等现代属性无提示） - 开启 “Autopilot for CSS properties”：Settings → Editor → Inspections → CSS → “Unknown CSS property” → 勾选 “Show warnings”，并确保
flex-grow、flex-basis等不在忽略列表中 - 配置 Live Templates 快速插入常用 Flex 声明：比如输入
flexrow回车，自动展开为display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch;
调试 Flex 布局时，别只信 WebStorm 的“预览”
WebStorm 内置的 Preview 功能只渲染 HTML 结构快照，不执行 JS、不模拟真实 viewport、不触发媒体查询，更不会计算 Flex 项目的动态伸缩行为。
- 真正验证
flex: 1是否生效？必须在 Chrome DevTools 的 Elements 面板中，勾选Show flexbox overlay（右上角三个点 → More Tools → Flexbox） - 想确认
justify-content: space-between为什么没起作用？检查父容器是否设置了固定宽度（width），或是否被max-width截断 —— WebStorm 不分析盒模型计算过程 - 遇到 Safari 下
align-self: center失效？大概率是 Safari 对flex-direction: column+align-self的旧版本兼容问题，需加-webkit-align-self: center—— WebStorm 默认不补全前缀
Flex 布局的“弹性”本质，是运行时根据容器尺寸与内容尺寸动态计算的结果。WebStorm 再智能，也只是编辑器，不是浏览器引擎。最可靠的验证永远发生在 DevTools 里，而不是编辑器预览窗格中。
