图片和文字在Flex容器中不对齐，根本原因是vertical-align对Flex子项无效，应使用align-items: center控制垂直居中；缩略图需用object-fit: cover统一裁剪；导航项应设display: flex并扩大点击区域。
图片和文字在Flex容器里总不对齐？检查align-items和vertical-align混用
Flex布局中图片和文字默认不居中对齐，不是因为写法错，而是vertical-align对Flex子项完全无效——它只作用于inline或table-cell元素。真正起效的是容器的align-items，但很多人习惯性加vertical-align: middle，反而干扰理解。
-
align-items: center是让所有子项（包括img和span）在交叉轴（通常是垂直方向）上居中，这是首选方案 - 如果图片设置了
display: block，它会脱离行内流，此时vertical-align彻底失效，删掉它 - 文字内容若含换行或
line-height异常，可能视觉上“偏高”，建议统一设line-height: 1.2或与容器高度匹配
缩略图尺寸不一致导致列表错位？用object-fit统一裁剪
原始图片宽高比不同，直接设固定width/height会导致拉伸或留白。不用JS计算，CSS原生就能处理。
- 给缩略图加
width: 48px; height: 48px; object-fit: cover;，强制等比缩放并裁切，保持视觉整齐 - 避免用
background-image模拟缩略图——虽然可控性强，但丧失alt语义和SEO支持 - 如果要兼容IE，
object-fit需配合background-size: cover降级，但必须把图片转为背景，代价是可访问性下降
导航项点击区域太小？别只靠padding，扩展cursor感知范围
缩略图+文字组合后，实际可点击区域常被低估。用户点在文字左侧空隙却没响应，不是bug，是默认a标签只包裹内容本身。
- 给导航项（如
a或li）设display: flex; align-items: center; padding: 8px 12px;，让整个Flex容器成为点击区 - 加
cursor: pointer;明确反馈可交互，尤其当父容器无下划线时更关键 - 移动端需确保最小触控尺寸≥44×44px，可用
min-height: 44px;兜底，避免padding被压缩
Flex换行后缩略图错位？慎用flex-wrap和justify-content
列表过长需要折行时，justify-content: space-between会让最后一行元素左对齐，看起来像“缺了几个”。这不是Flex的错，是它的设计逻辑。
立即学习“前端免费学习笔记（深入）”；
- 改用
justify-content: flex-start+flex-wrap: wrap，保证每行都从左开始，视觉更可控 - 若需末行也撑满，得用JavaScript计算剩余项数再动态加空占位符，纯CSS无解
- 缩略图在折行后变小？检查是否误设了
flex: 1在图片上——它会压缩图片，应只作用于文字容器
align-items、object-fit、点击区域这三处最容易反复调试；尤其是把图片当inline元素用时，vertical-align和align-items的冲突几乎必踩。 
