必须用flex布局实现友情链接网格，因其语义正确、响应式灵活、代码简洁；核心是设容器display: flex与flex-wrap: wrap，子项用flex-basis而非width控制列宽，并配gap和min-width保障多端适配。
直接用 flex 布局做友情链接网格，兼容性好、代码短、响应式控制灵活，别再套 table 或硬写 float 了。
为什么不用 table 做友链网格
table 的语义是“展示行列结构化数据”，而友情链接本质是“一组并列的导航链接”，用 table 不仅违反语义，还会带来额外嵌套、难以响应式缩放、屏幕阅读器识别混乱等问题。实际调试中常见错误：td 内容撑开列宽导致网格错行、colspan 误用后布局塌陷、移动端无法流式换行。
用 flex 实现 3 列自适应网格（含 hover 效果）
核心是把所有友链包裹在容器里，设为 display: flex 并配合 flex-wrap: wrap，子项用 flex-basis 控制基础宽度，而非固定 width：
<div class="links-grid"> <a href="https://example1.com" target="_blank">技术博客</a> <a href="https://example2.com" target="_blank">设计站</a> <a href="https://example3.com" target="_blank">工具集</a> <a href="https://example4.com" target="_blank">开源库</a> </div>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.links-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.links-grid > a {
flex: 1 1 calc(33.333% - 12px); /* 每行最多3个，减去 gap 占位 */
min-width: 200px; /* 防止过小屏下挤成一列 */
padding: 8px 12px;
border-radius: 4px;
background: #f5f5f5;
text-align: center;
text-decoration: none;
color: #333;
transition: all 0.2s;
}
.links-grid > a:hover {
background: #007bff;
color: white;
}- 关键点：
flex: 1 1 calc(33.333% - 12px)中的12px必须和gap值一致，否则小屏下最后一项会掉行 -
min-width是防止在窄屏（如手机）下每个链接被压得太窄，强行维持可读尺寸 - 别漏写
target="_blank"，否则用户点击后跳转会丢失当前页面上下文
需要支持 IE11？改用 inline-block 替代方案
IE11 对 flex-wrap 支持不稳定，且不支持 gap。此时可退化为 inline-block + text-align: justify 实现等分布局：
.links-grid-legacy {
text-align: justify;
font-size: 0; /* 消除 inline-block 默认间隙 */
}
.links-grid-legacy::after {
content: '';
display: inline-block;
width: 100%;
}
.links-grid-legacy > a {
display: inline-block;
width: calc(33.333% - 8px);
margin-right: 8px;
font-size: 14px;
vertical-align: top;
}注意：::after 伪元素是必须的，否则 justify 失效；font-size: 0 和子项恢复字体大小要配对使用，否则文字不显示。
真正容易被忽略的是链接的可访问性：每个 <a> 必须有明确的文本内容或 aria-label，不能只靠图标撑起链接区域；另外，如果友链来自数据库动态渲染，记得对 url 字段做 XSS 过滤，避免注入 javascript: 协议。
