Flexbox不支持rowspan/colspan，应优先用CSS Grid实现跨行跨列；若必须用Flexbox，可通过伪跨列、order+flex-wrap模拟，并注意align-items与align-content区别及避免绝对定位。
Flexbox 里没有 rowspan 和 colspan 怎么办
Flexbox 本身不支持表格那样的单元格跨行跨列，display: flex 的子项天然按顺序流式排列，无法像 <td rowspan="2"> 那样声明“占两行”。强行用 <code>margin 或 transform 模拟容易破坏语义和可访问性，也扛不住响应式重排。
实操建议：
- 优先考虑是否真需要 Flexbox —— 如果结构本质是二维网格（比如仪表盘、卡片矩阵、带侧边栏的主内容区），直接用
display: grid，grid-row/grid-column能干净实现跨行跨列 - 如果必须用 Flexbox（例如父容器已固定为
flex，且不能改布局模型），可用“伪跨列”思路：把要跨列的元素单独提一层，用width: 100%占满整行，再在其内部嵌套子 Flex 容器布局内容 - 避免用
flex-basis+calc()硬凑跨列宽度，不同 flex 主轴方向下行为不一致，且缩放或字体变化时易错位
用 order + flex-wrap 模拟视觉上的跨行效果
当需要某一块内容在视觉上“下沉”到下一行并横跨多列（比如 banner 下接三栏内容），order 可调整渲染顺序，配合 flex-wrap: wrap 让后续项换行，但要注意：它只改变视觉顺序，DOM 顺序和可访问性顺序不变。
常见错误现象：order 值设得过大导致后续项被挤到第三行；没设 flex-basis 导致换行判断失准。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给要“跨行”的元素设
order: 1，其他项保持默认order: 0 - 确保容器有
flex-wrap: wrap，且子项总宽度超过容器时能自然折行 - 为防止换行错乱，给所有子项显式设置
flex-basis（如flex-basis: 300px或flex-basis: calc(50% - 8px)） - 测试屏幕缩小时的换行点，
order在小屏下可能让内容顺序变得反直觉
align-items 和 align-content 对“跨行区域高度”的影响
Flex 容器中所谓“跨行”，往往还隐含对齐需求：比如一个大卡片占两行，希望它和旁边单行卡片顶部对齐，或者垂直居中。这时容易混淆 align-items（单行内交叉轴对齐）和 align-content（多行之间在交叉轴上的分布）。
使用场景：侧边栏 + 主内容区布局中，主区高度不固定，需让侧边栏和主区顶部对齐；或多个等高卡片组中插入一个 taller 的卡片。
实操建议：
- 若容器只有一行，
align-content无效，只看align-items - 若有多行且想控制行间距（比如让跨行项撑开整体高度），必须设
align-content: flex-start（默认是stretch，但仅当容器有明确高度时才生效） - 不要依赖
align-items: stretch强制子项等高——它只对同一行内的子项起作用，跨行项不会被拉伸对齐
为什么不用 position: absolute 强行定位来模拟跨列
有人会想：既然 Flex 不让跨，那我用 position: absolute 把元素拖到指定位置不就行了？短期看起来有效，但很快会暴露问题。
性能与兼容性影响：绝对定位元素脱离文档流，父容器无法感知其尺寸，Flex 的自动换行、对齐、min-height 计算全部失效；iOS Safari 旧版本中，transform + absolute 组合可能触发渲染异常。
实操建议：
- 绝对定位只用于装饰性、非语义化元素（比如角标、浮层按钮）
- 一旦涉及主要内容区域、可聚焦控件、屏幕阅读器支持，必须放弃该方案
- 如果设计稿强制要求“视觉跨列”，和产品确认是否接受语义化降级——很多时候，用 Grid 实现的
grid-column: 1 / -1既满足视觉，又保语义
真正难的不是怎么让两个 div 看起来连在一起，而是让它们在不同设备、不同字号、不同辅助技术下依然表达正确的结构关系。Flex 的局限性恰恰提醒你：别在错误的工具上死磕。
