父容器必须显式设置 display: flex 才能启用 flex 布局，否则子元素的 flex 属性无效；左栏推荐用 flex: 0 0 250px 保障宽度稳定，右栏需加 word-break: break-word 防止长内容溢出。
父容器漏掉 display: flex 就等于白写
很多人写了子元素的 flex: 1 或 flex: 0 0 250px，但页面还是单列堆叠——根本原因就是父容器没设 display: flex。它不是可选配置，是 Flex 布局的启动开关。
常见错误现象：左栏写死了 width: 250px，右栏加了 flex: 1，但右栏还是卡在左栏下面；或者两栏宽度加起来超出了容器，出现横向滚动条。
- 必须给直接包裹两栏的父元素加
display: flex，且不能被后代的display: block覆盖 - 别依赖浏览器默认行为，显式写
flex-direction: row（虽然它是默认值，但某些 CSS 重置库会改） - 如果用了第三方 UI 框架（比如 Ant Design、Element Plus），检查其容器类是否已设 flex，避免重复或冲突
左栏用 flex: 0 0 250px，别只写 width: 250px
width: 250px 看似简单，但内容稍长（比如带按钮的菜单项、长中文标签）就可能撑宽左栏；而 flex: 0 0 250px 明确告诉浏览器：不伸缩、不收缩、基础宽就是 250px，更稳。
使用场景：后台管理系统的侧边栏、文档页左侧导航、表单左右字段对齐。
-
flex: 0 0 250px=flex-grow: 0; flex-shrink: 0; flex-basis: 250px，防内容挤压变形 - 若需响应式最小宽度保护，可叠加
min-width: 200px，但注意小屏下别让左栏把右栏挤没了 - 别给左栏设
flex: 1或flex: auto，否则它会抢空间，右栏反而变窄甚至消失
右栏溢出长 URL 或连续数字？加 word-break: break-word
Flex 布局能搞定宽度分配，但挡不住右栏里一串无空格的英文、数字或 URL —— 它们会硬生生顶破容器边界，造成横向溢出或遮挡滚动条。
这不是布局失效，是文本换行策略没配对。所有现代浏览器都支持 word-break: break-word（或等价的 overflow-wrap: break-word）。
- 只加在右栏容器上，左栏一般不需要
- 如果右栏内容含代码块或预格式化文本（
<pre class="brush:php;toolbar:false;"></pre>），记得额外处理：对<pre class="brush:php;toolbar:false;"></pre>加white-space: pre-wrap - 慎用
text-overflow: ellipsis，它只截断单行，对多行段落无效
高度不对齐？先确认 align-items: stretch 还在
左栏高度固定，右栏内容多，但左栏背景色没拉满——这不是 bug，是 CSS 默认行为：Flex 子项默认按内容高度撑开，不会自动等高。要等高，得靠父容器的 align-items 控制交叉轴对齐。
问题常出在全局 CSS 重置（如 normalize.css 或某些 UI 库）悄悄覆盖了 align-items: stretch（它的默认值）。
- 显式写
align-items: stretch到父容器，比依赖默认更可靠 - 如果右栏用了
height: 100%却没效果，大概率是父容器没设高度，或中间某层display: block断了继承链 - 等高需求强的场景（比如卡片列表），
display: grid的grid-template-rows: 1fr反而更直白，但得放弃 IE 支持
真正容易被忽略的不是怎么写 flex，而是右栏内容本身的“不可控性”：一个没加 word-break 的日志 ID、一段未转义的 JSON 字符串、用户粘贴进来的超长 base64，都会让布局瞬间失守。写完 flex: 1 后，顺手加一行 word-break: break-word 是成本最低的兜底动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
