多行文字和图标底部对齐失效的根源在于align-items作用范围错误；应将图标与文字置于同一grid容器并设align-items:end或baseline，而非在父容器设置后又用align-self冲突。
多行文字和图标底部对齐不生效？检查 align-items 的作用范围
Grid 默认的 align-items: stretch 会让子项撑满容器高度，此时单行文字和图标看似对齐，但一旦文字换行，图标就会“浮”在顶部。真正起效的是把图标和文字包进同一个 grid 容器，并设 align-items: end 或 baseline。
-
align-items: end让所有子项底边对齐——适合图标和文字整体视觉下沿一致的场景 -
align-items: baseline按第一行文字基线对齐——适合小图标配短标签，更自然 - 别在父容器上设
align-items后又给子项加align-self冲突；优先统一用容器级控制 - 如果图标是
<img>，默认是 inline 元素，自带底部留白（像文字），需加vertical-align: bottom或改display: block
图标用 <svg></svg> 时，为什么文字总被顶高？
<svg></svg> 默认按字符基线定位，但它的基线位置不固定，尤其当 viewBox 缩放或有 desc/title 时，浏览器解析可能偏移。直接靠 vertical-align 很难稳定。
- 最稳做法：把
<svg></svg>和文字一起放进一个display: grid容器，用align-items: baseline - 避免给
<svg></svg>设height同时不设vertical-align——这会让它按默认基线挂载，文字行高一变就错位 - 如果必须用 inline SVG，加
style="vertical-align: -0.125em"是常见经验值，但只适用于字号固定场景
响应式下多行变单行，对齐突然失效？
文字从两行缩成一行时，align-items: baseline 的参考线变了——原本对齐第二行基线，现在对齐第一行，图标看起来“跳”了。
- 用
align-items: end更鲁棒，因为底边位置不随行数变化 - 若坚持用
baseline，可配合line-clamp+display: -webkit-box强制截断，保持行数恒定 - 别依赖
min-height撑开容器来“骗”对齐——Grid 对齐不看容器高度，只看子项自身尺寸和对齐规则
Flex 能不能替代 Grid？能，但要注意 align-items 行为差异
Flex 的 align-items 在单行时表现接近 Grid，但多行 flex-wrap: wrap 下，每行独立对齐，图标可能和不同行的文字错位。
- Grid 天然支持二维对齐，一行或多行都统一按容器底边/基线算，更适合这个需求
- Flex 需配合
align-content: flex-end控制多行整体位置，但依然无法保证跨行文字与同一图标对齐 - 如果已有 Flex 布局且不希望重构，把图标和文字包进独立
display: inline-flex小容器里，再设align-items: baseline，比全局 Flex 更可控
真正容易被忽略的点是：对齐效果是否生效，取决于你把对齐属性写在谁身上——不是图标，也不是文字，而是它们共同的直系父容器。写错一层，就全白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
