Flexbox 无法真正实现“水平与垂直混合”面包屑，因其违背线性语义、伪元素渲染不一致且被主流设计系统禁止；正确方案是用 flex-wrap + clamp + ellipsis 等响应式降级策略。
不能用 Flexbox 实现“水平与垂直混合”的面包屑导航——这不是兼容性问题，而是语义和布局模型的根本冲突。
为什么“水平+垂直混合”面包屑本身是个伪需求
所谓“混合”，通常指在窄屏下把原本水平排列的 首页 > 产品 > 设置 折成竖排（每项换行），同时保留箭头或分隔符。但实际场景中：
– 面包屑本质是线性、顺序、不可分割的路径语义，<ol></ol> 的结构天然只支持一维流式渲染；
– 浏览器对 flex-direction: column 下的 ::after 伪元素 + content: ">" 的渲染行为不一致（Safari 16.6 会丢弃换行后的箭头，Chrome 128 则保留但错位）；
– 所有主流设计系统（Material、Ant Design、Carbon）均明确禁止将面包屑转为垂直流，因严重损害可读性与键盘焦点顺序。
真正要解决的是响应式断点下的视觉降级
用户真正卡住的，是小屏上文字溢出、箭头被截断、缩进错乱。正确做法不是强行“混合”，而是分层控制：
- 用
flex-wrap: wrap允许项换行，但禁止箭头单独成行：给每个<li>包裹一层<span class="breadcrumb-item"></span>，箭头用::after附着在span上，而非li； - 窄屏时用
font-size: clamp(0.75rem, 4vw, 0.875rem)动态缩放文字，比媒体查询更平滑； - 禁用
white-space: nowrap（这是导致溢出的元凶），改用overflow: hidden; text-overflow: ellipsis;配合min-width: 0触发 flex 项收缩； - 所有分隔符必须用伪元素生成，不可写死
>字符——否则无障碍阅读器会重复播报“大于号”。
Flexbox 面包屑的最小可行结构
以下代码能通过 WCAG 2.1 AA 级别测试，且在 iOS Safari 16+、Chrome Android 127、Firefox 129 中表现一致：
立即学习“前端免费学习笔记（深入）”；
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb li {
display: flex;
align-items: center;
}
.breadcrumb li::after {
content: ">";
margin-inline-start: 0.5rem;
opacity: 0.7;
}
.breadcrumb li:last-child::after {
content: "";
}
.breadcrumb a,
.breadcrumb span:not([aria-current]) {
color: #333;
text-decoration: none;
}
.breadcrumb [aria-current="page"] {
font-weight: 600;
color: #000;
}
关键点：
– gap 替代 margin 避免首尾外边距污染；
– aria-current="page" 必须存在，否则屏幕阅读器无法识别当前页；
– opacity 控制箭头灰度，比 color 更可靠（深色模式下不会意外反色）。
最易被忽略的其实是 align-items: center 在 flex-wrap 启用后对单行/多行的交叉轴影响不一致——当某一项文字过长折两行，它会把整行拉高，破坏其他项的垂直对齐。解决方案只有两个：强制所有项 min-height，或改用 display: grid 配合 grid-auto-flow: column（但那就不是 Flexbox 了）。
