flex-direction: column 使主轴垂直导致子项上下堆叠，多列布局需用 row；align-items: stretch 失效常因父容器无高度、子项设了显式高或 align-self；换行错位应调 align-content；box-sizing 不统一或图片 min-height:auto 也会破坏等高。
为什么 flex-direction: column 会让多列“变单列”
加了 display: flex 却发现所有子项垂直堆叠、根本不是并排多列？大概率是误设了 flex-direction: column。这个值会让主轴变成垂直方向，子项从上到下排列，天然就失去“多列横向布局”的前提。真正需要的是默认的 flex-direction: row（或直接不写，它就是初始值）。
- 只在需要垂直布局（比如侧边栏+主内容区）时才用
column - 多列卡片、网格式展示等场景，必须保持
row或省略该声明 - 如果用了
flex-wrap: wrap还想换行，flex-direction: row是基础，否则换行逻辑失效
align-items: stretch 失效的三个常见干扰项
align-items: stretch 是让子项在交叉轴（垂直方向）自动拉伸等高的默认行为，但它很“娇气”，一碰就停：
- 父容器没高度参照：比如
height: auto且内容极短，整个容器塌缩，子项再拉伸也没空间——加min-height: 300px或min-height: 100vh就能唤醒它 - 子项自己设了
height、max-height或min-height: auto（尤其图片/视频默认值），会直接覆盖 stretch 行为 - 某个子项写了
align-self: flex-start或center，等于主动退出等高队列
flex-wrap 换行后各行高度不齐怎么办
当子项数量多触发换行，你会发现第一行高、第二行矮，整体错位。这不是子项不等高，而是“行”之间没对齐：
- 关键属性是
align-content，不是align-items—— 后者管单行内，前者管多行间 - 设
align-content: stretch可让所有行均匀拉伸填满容器高度，但前提是父容器有明确高度（如height: 600px） - 若不想固定容器高度，改用
grid更稳妥：display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))); align-items: stretch;
box-sizing 和内部元素怎么悄悄破坏等高
视觉上看着不等高，查来查去代码都对？可能是渲染级误差：
- 子项的
box-sizing不统一：有的border-box，有的content-box，padding/border 计算方式不同，差出几像素 - 子项里有
img且没设min-height: 0，它的默认min-height: auto会阻止 flex 拉伸 - 子项用了
position: absolute做内部布局，虽然不影响外层 stretch，但如果它没撑开自身高度，拉伸后就是大片空白
最该盯住的不是“怎么加代码”，而是删掉所有可能干扰 stretch 的显式高度、对齐和盒模型声明。等高是 Flex/Grid 的默认能力，不是靠补丁拼出来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
