右栏子项不横向排列是因为flex不继承，必须在右栏的直接子容器上显式设置display: flex；若右栏直接包含多个子元素，则需对右栏本身设display: flex而非仅flex: 1。
右栏嵌套 Flex 时为什么子项不横向排列？
常见现象是右栏内容堆成一列，哪怕写了 display: flex 也没用。根本原因是：Flex 不继承、不穿透，父级（右栏）设了 flex: 1 只让它占位，不会自动让它的子元素也启用 Flex 布局。
必须在右栏内部的直接容器上显式加 display: flex，否则所有子元素还是按普通文档流渲染。
- 错误写法：
.right { flex: 1; }+ 内部<div class="inner">...</div>但没给.inner设display: flex - 正确做法：右栏里再包一层容器（比如
.right-content），然后对它设display: flex - 如果右栏直接放多个子元素（如
<header></header>、<main></main>、<footer></footer>），那这些元素就是右栏的直接子项——必须对右栏本身设display: flex，而不是只靠外层容器的flex: 1
嵌套 Flex 中 flex: 1 失效的典型原因
右栏内某块区域用了 flex: 1 却不撑满剩余空间，甚至溢出，大概率是被内容最小宽度保护卡住了。
浏览器默认给块级元素设 min-width: auto，遇到长 URL、无空格英文或图片时，会拒绝收缩，导致 flex-basis: 0（flex: 1 的隐式值）失效。
- 解决办法：对需要收缩的子项加
min-width: 0（注意不是0px） - 若想保留内容自然宽度再分配剩余空间，改用
flex: 1 1 auto - 别在右栏上同时写
width: 100%和flex: 1，两者冲突，width会被忽略或引发计算异常
右栏嵌套 Flex 后高度塌陷或错位怎么办？
右栏本身是 flex: 1，但它内部的 Flex 容器若没设高度参考，flex: 1 在子级就无效——尤其当父容器（外层 flex 容器）没设明确高度时。
- 检查外层容器是否漏了
height: 100vh或min-height: 100vh；纯靠内容撑高时，子级flex: 1无法生效 - 右栏内若需等高布局（比如头/主体/尾平分高度），得在外层容器设
flex-direction: column，再给右栏设display: flex+flex-direction: column，然后各子项用flex: 1 - 避免在右栏上加
overflow: hidden，它可能意外裁剪position: absolute子元素或阴影
嵌套层级深了，justify-content 和 align-items 怎么不生效？
每层 Flex 容器的主轴和交叉轴独立，上层设了 flex-direction: column，不影响下层的轴向逻辑。
- 右栏内如果要水平居中子项，它自己得是
display: flex，且主轴是水平方向（默认），再用justify-content: center - 如果右栏内先设了
flex-direction: column，那它的justify-content就管垂直方向，align-items才管水平居中 - 别指望外层容器的
align-items: stretch能拉伸右栏里的孙子元素——它只作用于直接子项
display: flex、哪一层该加 min-width: 0、哪一层其实根本不需要 Flex”。多一层嵌套，就得确认一次 display 和 min-width，少一个 min-width: 0，就可能让整个右栏布局在长文本场景下突然崩掉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
