联系人列表对齐问题应统一用 display: flex 布局，设 align-items: flex-start 保证头像顶部对齐，文字部分用 align-self: center 居中；响应式换行需配合 flex-basis 和 gap 控制宽度与间距；ie11 兼容优先降级为 inline-block。
联系人列表文字对齐不一致？用 align-items 统一基线
Flex 容器默认是 align-items: stretch，但联系人列表里头像、姓名、职位常因行高或字体差异导致垂直错位。直接设成 align-items: center 看似合理，实际会让文字“悬浮”在头像中间，视觉上反而不稳——因为中文文字默认基线（baseline）和图片底部对齐逻辑不同。
更稳妥的做法是：align-items: flex-start + 对文字容器加 margin-top: auto 或用 align-self: baseline 配合 vertical-align: baseline（仅对 inline 元素有效）。但最简方案是统一用 display: flex 包裹每行，并给文字部分设 align-self: center：
.contact-item {
display: flex;
align-items: flex-start; /* 保证头像顶部对齐 */
}
.contact-avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
}
.contact-info {
margin-left: 12px;
align-self: center; /* 文字整体居中，不依赖 baseline */
}
响应式断点下列表换行错乱？别只靠 flex-wrap
用 flex-wrap: wrap 做多列联系人时，常见问题是小屏下卡片宽度计算不准，导致最后一行只有一张卡片还空半行。这不是 flex-wrap 的锅，而是子项没设明确的 flex-basis 或 min-width。
关键点在于：不要只依赖 width，而要用 flex: 0 0 calc(50% - 8px) 这类弹性值，留出间隙余量：
- 间隙用
gap而非margin，避免首尾外边距溢出 - 移动端优先设
flex-direction: column，比强行 wrap 更可控 - 如果用
justify-content: space-between，记得补全子项数量为偶数，否则末行不对齐
头像+文字间距忽大忽小？gap 和 margin 别混用
很多人给 .contact-item 加 margin-bottom，再给内部头像和文字加 margin-right，结果在不同字号或缩放比例下间距崩坏。Flex 的 gap 是专治这个的，但它只作用于直接子元素之间。
所以结构必须干净：
<div class="contact-list">
<div class="contact-item">
@@##@@
<div class="contact-info">...</div>
</div>
</div>
然后只在 .contact-list 上设 gap: 16px，所有子项间统一留白；.contact-item 内部用 gap: 12px 控制头像与文字距离。一旦出现 margin 和 gap 并存，就容易叠加或抵消。
IE11 下 flex 表现异常？优先降级到 inline-block 而非 JS 补丁
IE11 对 flex-wrap、gap、甚至 align-self 支持残缺，硬加 -ms- 前缀效果有限。真要兼容，不如用渐进增强思路：
- 基础样式用
display: inline-block+vertical-align: top，它在 IE6+ 都稳定 - 现代浏览器用
@supports (display: flex)覆盖 - 避免用
flex: 1做等宽，IE11 会忽略，改用flex-basis: 0+flex-grow: 1
真正难处理的是 gap 缺失——这时候宁可用 padding 模拟，也别引入 Flexbugs 的 hack 脚本。
复杂点从来不在 flex 写法本身，而在你是否清楚哪一层该由 CSS 控制间距，哪一层该交给 DOM 结构约束。一个没设 box-sizing: border-box 的头像容器，就能让所有对齐努力白费。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
