用 标签临时切换 flex 方向需显式设 display: flex、flex-direction 和 flex-wrap，子项加 min-width: 0 防溢出；内联样式比 devtools 更可靠，因优先级一致且不丢失；验证时须满足父容器有高度、flex-basis: 0、避免子项固定尺寸干扰拉伸。
怎么用 <style></style> 标签临时切换 flex 方向
直接在 HTML 里加 <style></style>，比改 CSS 文件快得多，适合边写边调。关键是别写死在外部样式表里——那样每次改都要保存、刷新、清缓存。
常见错误是只试 flex-direction: row，结果容器里子项没撑开、换行失效，其实是忘了设 display: flex 或父容器宽度不够。
- 必须显式写
display: flex，仅靠flex-direction不会触发 flex 布局 -
flex-wrap: wrap很容易被忽略，尤其当子项总宽超容器时，不加就全挤成一行溢出 - 移动端调试建议加
min-width: 0到子项，防止文字撑破flex: 1容器
<style>
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.item { min-width: 0; }
</style>
为什么 inline <style></style> 比 DevTools 里改更可靠
DevTools 里点几下确实快，但样式一刷新就丢；而且某些属性（比如 flex-basis 的百分比值）在 DevTools 里输完回车可能被自动转成像素，看不出真实计算逻辑。
更关键的是：浏览器对内联 <style></style> 的优先级和解析时机，跟外部 CSS 一致，能准确反映层叠顺序和继承行为；而 DevTools 注入的样式属于“用户代理样式”层级，有时会绕过 !important 或媒体查询判断。
立即学习“前端免费学习笔记（深入）”；
- 改完直接 Ctrl+R 就生效，不用手动复制粘贴到文件
- 可配合
@media (max-width: 768px)写响应式预览，不用切设备模式 - 避免误操作把临时样式留在正式 CSS 文件里（很多人调完忘记删）
flex 布局验证时最容易漏掉的三个计算前提
很多“明明写了 flex: 1 却不占满”的问题，根源不在 flex 属性本身，而在它的计算依赖项没满足。
- 父容器必须有明确高度（
height或min-height），否则flex: 1在纵轴上无效 -
flex-basis设为auto时，实际取子项内容尺寸；想让它按容器分，得显式写flex-basis: 0 -
align-items默认是stretch，但若子项设了height或min-height，就会覆盖拉伸行为
快速验证：把父容器临时加个 outline: 1px solid red，一眼看出它有没有真正撑开。
多个布局方案并存时怎么快速切换不冲突
别用多个 <style></style> 标签来回删改。用类名控制更稳，比如给 body 加不同 class，再在单个 <style></style> 里写对应规则。
- 给
，然后在<style></style>里写.layout-flex-col .container { flex-direction: column; } - 避免用 ID 或行内 style 控制，否则跟组件框架（如 React）的样式作用域容易打架
- 如果项目用了 CSS Modules 或 scoped style，临时验证时先关掉它们，不然内联样式会被优先级压制
复杂点在于：flex 的交叉轴行为（align-items / align-content）受容器尺寸和子项数量双重影响，光看代码很难预判，必须真跑起来看渲染结果——这也是为什么不能只靠“读样式”来验证布局。
