现代项目优先用 grid，flex 仅当需兼容 IE11 或布局极简时考虑；grid 对多行均分、等高、间隙控制更直观，推荐写法为 display: grid + auto-fit + minmax；IE11 不支持 grid 需回退 flex；a 标签须设 display: block/inline-block 并加 padding 和悬停反馈。
友情链接容器必须用 flex 还是 grid？
直接说结论：现代项目优先用 grid，flex 仅当需兼容 IE11 或布局极简时考虑。两者都能响应式，但 grid 对多行均分、等高、间隙控制更直观，不用依赖 flex-wrap + justify-content 组合猜行为。
常见错误是把所有链接塞进一个 div 然后只靠 width: 25% 做四列——这在小屏下会溢出或换行错乱，因为没设 min-width 或媒体查询断点。
-
grid推荐写法：.links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } - 关键参数：
auto-fit比auto-fill更省空间；minmax(200px, 1fr)保证单列不窄于 200px，宽屏自动均分 - IE11 不支持
grid，若必须兼容，改用flex并加@supports not (display: grid)回退样式
链接样式怎么避免点击区域太小？
友情链接常被做成纯文字+下划线，用户实际点击时手指容易误触空白处或点空——这不是设计问题，是 a 标签默认 display: inline 导致内边距无效。
- 必须显式设
a为display: block或inline-block，再加padding: 8px 16px - 别只靠颜色区分可点击态，加
border-radius: 4px和悬停背景色（如background: #f5f5f5）提升触感反馈 - 移动端尤其注意：iOS Safari 对
font-size 的链接会自动放大，可能破坏布局，统一设 <code>font-size: 14px以上
如何让 logo 图标和文字对齐不歪？
混排图标（img）和文字时，vertical-align 是最易踩坑的点。默认 baseline 会让图标底部对齐文字基线，看起来像“下沉”。
立即学习“前端免费学习笔记（深入）”；
- 统一设
vertical-align: middle，但注意：如果父容器行高不够，仍可能挤出高度 - 更稳方案：用
display: flex; align-items: center包裹单个链接项，图标width: 16px; height: 16px; margin-right: 8px - 图标尺寸建议固定为
16x16或24x24，避免不同站图标比例差异导致高度不一致
要不要加 rel="nofollow"？
不是技术问题，但直接影响 SEO。如果你的友情链接页面对外公开且未做人工审核，搜索引擎可能视作“链接农场”，反而拖累权重。
- 真实互链合作：去掉
rel="nofollow"，加rel="ugc"（表示用户生成内容）更合规 - 自动聚合或未审核链接：必须加
rel="nofollow noopener noreferrer"，noopener防止window.opener安全漏洞 - 别漏掉
target="_blank"—— 但没rel="noopener"时，新窗口可能被恶意脚本劫持
响应式友情链接真正的难点不在布局，而在链接来源可信度与 HTML 语义的平衡。样式可以调，但 rel 属性一旦上线就影响搜索收录，改起来比改 CSS 费劲得多。
