flex: 0 0 250px是左栏固定宽度的正确写法，它等价于flex-grow: 0; flex-shrink: 0; flex-basis: 250px，明确禁用伸缩并固定基础宽度，须配合box-sizing: border-box；右栏用flex: 1自适应，无需calc计算。
flex: 0 0 250px 是固定宽度的正确写法，不是 width: 250px
在 display: flex 容器里只写 width: 250px 是危险的：它不阻止收缩，一旦父容器变窄或右栏内容撑开，左栏可能被压缩——尤其当它带 padding 或 border 时，实际宽度会超出预期。根本原因是 flex-shrink: 1 默认开启。
真正守住“固定”二字的做法是：flex: 0 0 250px，它等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 250px，明确禁用伸缩、固定基础宽度。
- 必须配合
box-sizing: border-box，否则padding和border会额外加宽，导致右栏错位或横向滚动 - 别单独设
width再补flex-shrink: 0，容易漏掉，也不如flex: 0 0 250px简洁可靠 - 如果左栏需要响应式断点（比如小屏隐藏），直接用
@media控制display或flex值即可，不影响右栏逻辑
右栏用 flex: 1 就够了，别碰 calc()
flex: 1 让右栏自动填满剩余空间，语义清晰、天然响应式友好。而 width: calc(100% - 250px) 这类写法极易出错：
- 只要左栏加了
border或padding，或者父容器有padding，计算就失效 - 无法响应
min-width或max-width约束，得额外加 hack - 遇到长 URL、无空格英文、嵌套
flex容器时，flex: 1本身不处理换行，需配合min-width: 0+word-break: break-word或overflow-wrap: break-word
若右栏需最小宽度保护（如防止内容被压太窄），直接加 min-width: 300px 即可，flex: 1 和 min-width 能共存。
HTML 元素顺序影响 flex: 1 的行为
Flex 布局中，子项顺序决定空间分配逻辑。常见错误是把右栏写在 HTML 前面，结果左栏被“挤”到下一行或宽度异常——因为 flex: 1 会尝试撑开它前面的空白区域。
- 左侧自适应、右侧固定时，HTML 中应先写左栏，再写右栏
- 左侧固定、右侧自适应时，同样要先写左栏，再写右栏
- 如果结构受限（比如 CMS 输出顺序不可控），可用
order属性调整视觉顺序，但别依赖它兜底布局逻辑
混用时最常被忽略的隐式约束
Flex 不负责兜底，它只分配空间。真正卡住布局的，往往是这些没显式声明的条件：
- 父容器是否明确设置了宽度来源？比如
width: 100%、100vw，或受上级max-width限制 - 内容是否自带抗收缩特性？如
<table> 默认按内容撑宽，需加 <code>width: 100%和table-layout: fixed - 盒模型是否统一？所有子项都该有
box-sizing: border-box，否则混合padding会导致宽度计算偏差 - 小屏下视口上下文是否丢失？比如父容器用了
width: 100%但没设min-width，窄屏时可能塌陷
这些点不满足，flex: 0 0 250px 和 flex: 1 就只是两行无效 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
