左右等高双栏布局在tailwind中默认可实现，前提是父容器有可测量高度（如min-h-screen）、子项未覆盖items-stretch（如无height/align-self），且flex方向为flex-row；grid方案更稳，因align-items:stretch天然等高，只需grid grid-cols-1 md:grid-cols-2。
左右等高双栏布局在 Tailwind 中默认就能实现，前提是用对容器类型、方向和高度上下文——不是加了 flex 就自动等高，也不是所有写法都兼容小屏。
Flex 容器下左右栏为何不等高？
常见现象是左栏短、右栏长，但左栏背景或边框没拉到底。根本原因只有两个：父容器没可测量的高度来源，或子项主动破坏了 stretch 行为。
- 外层容器漏了
min-h-screen、h-screen或明确的min-h-[500px]→items-stretch（默认启用）失去交叉轴参照，直接失效 - 某个栏写了
h-48、max-h-64或self-start→ 覆盖了容器级的items-stretch，导致该栏“拒绝拉伸” - 用了
flex-col却还指望items-stretch拉高 → 此时交叉轴是水平方向，items-stretch实际拉的是宽度，不是高度
Grid 方案为什么更稳？
Grid 天然按行对齐子项，同一行内所有子项默认由 align-items: stretch 拉齐高度，且不依赖父容器有显式高度——只要行内有内容，等高就成立。
- 必须显式加
grid类，光写grid-cols-2不生效（浏览器仍当 block 渲染） - 推荐写法：
grid grid-cols-1 md:grid-cols-2，小屏单列、大屏双栏，等高逻辑自然延续 - 若需左栏固定宽、右栏自适应，用
grid-cols-[240px_minmax(0,1fr)]，其中minmax(0,1fr)防止长内容撑破容器 - 避免在子项上加
h-full：它会覆盖stretch，尤其在 JIT 模式下还可能因空格未转下划线（如minmax(0, 1fr)应写成minmax(0,1fr)）导致类不生成
响应式切换时等高突然断掉怎么办？
小屏堆叠后左右栏“看起来不等高”，往往不是技术失效，而是视觉错觉：Flex 下 items-stretch 在 flex-col 时仍在拉伸宽度，若父容器被内容撑高，左右栏宽度一致，容易误判为“等高残留”。
- 正确做法是显式重置对齐行为：
md:items-stretch sm:items-start，大屏等高，小屏取消拉伸 - Grid 更省心：
grid grid-cols-1 sm:grid-cols-2，小屏单列无“行内子项”，自然不触发等高；大屏回到双栏，等高自动恢复 - 别依赖
order类来补结构缺陷——DOM 顺序必须是语义合理的（比如主内容在前），否则小屏堆叠后焦点顺序和屏幕阅读器朗读都会错乱
最易被忽略的 Safari 兼容细节
Safari 14–15 对盒模型极其敏感：右侧栏若带 p-4 却没设 box-border，它的 padding 和 border 会被算进 flex-1 的剩余空间计算中，导致内容区实际宽度严重缩水，甚至视觉消失。
- 务必给所有 Flex 子项加
box-border（Tailwind 默认不设） - 若用 Grid，
gap是安全的，它不参与子项盒模型计算，但只作用于直系子项，无法穿透嵌套容器 - 测试时打开 DevTools 的 Computed 面板，确认
align-items确实是stretch，且没被子项的align-self覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
