flex布局失效的根本原因是父容器未设display: flex，导致flex属性无效；必须显式声明display: flex、确保无破坏性样式、设置明确宽度，并正确使用flex: 0 0 200px和flex: 1配合min-width: 0等。
父容器没设 display: flex，flex 属性根本不起作用
很多情况下右侧操作区窄得可怜，甚至和标题一样宽——不是 flex: 1 写错了，而是父容器压根没启用 Flex 上下文。Flex 子项的 flex、align-self 等属性只在 display: flex 容器内生效。
- 必须显式写：
.header { display: flex; flex-direction: row; }（flex-direction: row虽是默认值，但旧版 WebView 或 Safari 14–15 可能忽略隐式声明） - 常见破坏因素：
float: left、position: absolute、display: inline-block—— 这些会让子元素脱离文档流，直接废掉 Flex 布局 - 父容器宽度必须有明确来源：比如
width: 100%、max-width: 1200px或width: 100vw；否则 Flex 引擎算不出“剩余空间”，flex: 1就等于没写
左侧标题用 width: 200px 会被压缩，得用 flex: 0 0 200px 锁死
只写 width: 200px 是盒模型层的初始值，在 Flex 容器里仍受 flex-shrink: 1（默认值）影响。小屏下标题文字换行、图标错位、整栏被压成一条细线，八成是这个原因。
- 正确写法：
.title { flex: 0 0 200px; }（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px） - 若标题含图标+文字，建议加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;防换行错位 - 避免混用：
width和flex-basis同时存在可能触发浏览器计算冲突
右侧操作区 flex: 1 不撑满？缺 min-width: 0 + box-sizing: border-box
flex: 1 默认展开为 flex: 1 1 0，关键在 flex-basis: 0 —— 它让右侧从零开始分空间。但若内容本身很宽（比如长 URL、未换行文本、嵌套 flex 容器），它会优先按内容宽度起步，而不是收缩。
- 必须配对写：
.actions { flex: 1; min-width: 0; box-sizing: border-box; } -
min-width: 0是让它“敢收缩”的开关；光靠flex: 1在 Safari 14–15、iOS 微信 WebView 下大概率失效 -
box-sizing: border-box防止 padding/border 被误算进分配空间——Safari 下漏掉这个，右侧可能直接变窄甚至消失 - 长单词或 URL 还需补
overflow-wrap: break-word，否则仍会横向撑破
响应式收起操作区时，别用 display: none
直接 display: none 会触发重排、焦点丢失、动画卡顿，尤其在表单类操作区里很危险。
- 更平滑做法：
@media (max-width: 768px) { .actions { flex: 0 0 0; overflow: hidden; transform: translateX(-100%); } } - 右侧保持
flex: 1，它会自动占满全宽，无需额外调整 - 过渡只加在
transform和opacity上，不触发 layout
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
