align-items: baseline 导致图片与文字不对齐，因图片基线在下边缘下方约4px处，而文字基线在x高度底部；解决宜用 align-items: center + vertical-align 或改用 grid 布局。
flex align-items: baseline 为什么图片和文字不对齐
因为 align-items: baseline 是按「行内盒子的基线（baseline）」对齐，而图片默认是 vertical-align: baseline，但它的基线其实是**下边缘下方约 4px 的位置**（源于字体 descender 空间），文字的基线则在字母 x 高度底部。两者基线物理位置不同，视觉上就“错开”了。
常见现象：图片底部悬空、文字像被往上顶了一点、右侧文字看起来偏高。
- 解决办法：把图片设为
vertical-align: middle或vertical-align: text-bottom，再配合align-items: baseline就没意义了——不如直接换策略 - 更稳妥的做法是放弃
baseline，改用align-items: center+ 显式控制图片尺寸和 vertical-align - 如果必须保留基线对齐语义（比如多行文字中嵌入图标），建议统一用
display: inline-flex包裹图标+文字，内部用align-items: baseline
grid 实现图文混排更可控的写法
Grid 不依赖行内基线逻辑，而是通过轨道对齐，更适合图文混排这种需要明确尺寸和位置关系的场景。
典型结构是：一行两列，左图右文，或图文交错流式排列。关键在 align-items 和 justify-items 的组合使用，以及避免隐式 min-height: auto 拉伸。
立即学习“前端免费学习笔记（深入）”；
- 用
display: grid; grid-template-columns: auto 1fr;实现图标+文字左对齐布局 - 图片加
align-self: center;可垂直居中，文字区域自然撑高 - 若图文需响应式堆叠，加
@media改为grid-template-columns: 1fr;即可 - 注意：不要给图片设
height: 100%且父容器无固定高，否则可能塌陷；推荐用max-width: 100%; height: auto;
.icon-text {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 8px;
}
.icon-text img {
width: 20px;
height: 20px;
flex-shrink: 0;
}
什么时候该选 flex，什么时候该选 grid
不是“哪个更新就用哪个”，而是看布局维度：
- 一维排列（如导航栏图标+文字、按钮内图标+文案）→ 用
display: flex，简单高效 - 二维关系（如图文卡片网格、带标题/描述/操作的横向条目、需要跨行对齐的混排）→ 用
display: grid - flex 嵌套太深（比如 flex 容器里再 flex 对齐子元素）容易失控，此时应抽一层 grid
- 兼容性要求到 IE11？那 grid 要谨慎，flex 的
align-items在 IE 中对baseline支持不一致，优先用center+vertical-align组合
实际项目中最容易被忽略的细节
图片加载前的 layout shift 和文字换行截断问题，比对齐更影响体验。
- 图片没设宽高时，加载瞬间会重排，导致文字跳动；务必设置
width/height或用 aspect-ratio - 文字过长溢出破坏布局，要在文字容器加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - flex 容器中图片设了
flex-shrink: 0但没限制最大宽，小屏下仍可能撑破容器；建议加max-width: 100% - 使用
line-height控制文字行高会影响align-items: baseline的参考线位置，调试时记得检查 computed styles 中的 baseline 位置
