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 拉伸。
