flex-wrap: wrap 是实现横向转多列响应式友情链接的核心，配合 flex: 1 1 120px、gap 和正确对齐属性（justify-content 用于单行，align-content 用于多行），兼顾兼容性与触控体验。
用 flex-wrap 实现横向转多列，别硬写 media query
纯 CSS 响应式友情链接排版，核心不是靠一堆 @media 切断点硬切，而是让容器自己“折行”。display: flex + flex-wrap: wrap 是最稳的解法，比 float 或 inline-block 更可控，也比 grid 更兼容老浏览器。
常见错误是只设 flex-direction: row 却忘了加 flex-wrap: wrap，结果链接全挤在一行溢出；或者给子项设了固定 width 却没配合 min-width，导致小屏下文字换行错乱。
- 父容器设
display: flex、flex-wrap: wrap、gap: 0.5rem（推荐用gap而非margin） - 每个链接项（
a或li）设flex: 1 1 120px—— 意思是“最小宽度 120px，可伸缩，主轴占满可用空间” - 避免给子项设死宽（如
width: 150px），否则小屏下无法收缩，只能溢出或换行断裂 - 如果链接文字较长，加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防撑开
justify-content 和 align-content 的区别必须分清
很多人调不对对齐效果，是因为混淆了这两个属性作用的对象：justify-content 控制的是单行内子项的主轴对齐（比如水平居中），而 align-content 控制的是“多行之间的交叉轴间距”——只有当 flex-wrap: wrap 生效、且内容真折成多行时，它才起作用。
典型场景：页脚链接在中屏下刚好两行，你希望这两行上下居中、行间留空，就得用 align-content: center；但如果只有一行，这个属性完全无效。
立即学习“前端免费学习笔记（深入）”；
- 单行对齐（如所有链接居中）→ 用
justify-content: center - 多行垂直分布（如两行链接上下均匀撑满容器高）→ 用
align-content: space-between或stretch - 子项自身文字对齐（如链接文字左对齐）→ 还是得靠
text-align: left，跟 flex 属性无关
IE11 兼容要手动补 -ms- 前缀，但别全加
IE11 对 Flex 的支持是半残的，flex-wrap、gap、align-content 都不认，但 display: -ms-flexbox 和 -ms-flex-wrap: wrap 是有效的。不过现在没必要为 IE11 写整套双语法，重点保主干逻辑即可。
错误做法是把所有 flex 相关属性都加上 -ms- 版本，结果现代浏览器反而被干扰；更糟的是用 Autoprefixer 默认配置，它已默认不输出 IE11 前缀了。
- 只加关键前缀：
display: -ms-flexbox、-ms-flex-wrap: wrap、-ms-flex-pack: center（对应justify-content） -
gap在 IE11 完全不支持 → 改用margin模拟，但只在 IE11 条件下生效（可用@supports not (gap: 1rem)包裹） - 别依赖
align-content做 IE11 布局，它在 IE11 里基本无效，改用padding或伪元素撑空间
移动端点击区域太小？别只改 font-size
友情链接常被忽略的一点是触控体验：小屏上文字变小后，a 标签实际点击热区可能只剩 16×16px，远低于 iOS/Android 推荐的 44×44px 最小点击尺寸。单纯放大 font-size 会破坏横向密度，正确做法是扩大可点击区域本身。
错误现象是用户点了好几次才触发跳转，尤其在 iPhone 上明显。这不是 JS 问题，是 CSS 盒模型没预留足够内边距。
- 给链接加
padding: 0.5rem 0.75rem，而不是只靠文字撑开 - 确保
line-height≥font-size× 1.4，避免文字贴顶贴底压缩热区 - 如果用了
flex布局，注意align-items: center可能让文字在行内垂直居中，但热区仍由padding决定，别误以为居中就等于可点 - 用 Chrome DevTools 的 “Toggle device toolbar” + “Emulate touch” 验证真实点击反馈
