使用Grid划分整体结构，Flex处理内部对齐。通过grid-template-areas定义区域，flex实现链接与图标排列，配合媒体查询适配移动端，提升可访问性，实现响应式页脚布局。
响应式页脚布局在现代网页设计中非常关键，既要美观又要适配各种设备。使用 Flex 和 Grid 布局可以轻松实现结构清晰、自适应的页脚。下面是一个结合 CSS Flexbox 与 Grid 的实用方案。
1. 使用 Grid 划分页脚整体结构
将页脚下划分为多个区域（如品牌信息、链接列、社交媒体、版权等），用 Grid 设置整体网格布局。
示例 HTML 结构：
<footer class="footer">
<div class="footer-brand">品牌</div>
<div class="footer-links">
<h4>快速链接</h4>
<ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li></ul>
</div>
<div class="footer-social">社交图标</div>
<div class="footer-copyright">© 2025 公司名</div>
</footer>
CSS 中使用 grid-template-areas 定义布局：
.footer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-areas:
"brand links social"
"copyright copyright copyright";
gap: 20px;
padding: 30px;
background: #333;
color: white;
}
每个子元素通过 grid-area 指定位置：
立即学习“前端免费学习笔记（深入）”；
.footer-brand { grid-area: brand; }
.footer-links { grid-area: links; }
.footer-social { grid-area: social; }
.footer-copyright { grid-area: copyright; text-align: center; }
2. 在局部使用 Flex 增强对齐与排列
Grid 负责整体分区，Flex 用于内部内容的对齐和流式排列。
例如：链接列表水平排列或居中对齐
.footer-links ul {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
}
社交图标行使用 Flex 实现等距分布：
.footer-social {
display: flex;
justify-content: center;
gap: 15px;
}
这样无论屏幕多宽，图标都能自动居中并保持间距一致。
3. 响应式断点优化移动端显示
小屏下调整网格行为，让内容垂直堆叠更合理。
@media (max-width: 768px) {
.footer {
grid-template-areas:
"brand"
"links"
"social"
"copyright";
grid-template-columns: 1fr;
}
.footer-links ul {
flex-direction: column;
align-items: center;
}
}
此时每块内容纵向排列，更适合手机浏览。
4. 注意可访问性与语义化
使用语义标签提升可读性，比如用 <nav> 包裹链接区，添加 aria-label 提高无障碍支持。
<nav aria-label="页脚导航" class="footer-links">...</nav>
颜色对比度要满足可读标准，背景与文字反差足够。
基本上就这些。Flex 和 Grid 各司其职：Grid 控制整体分区，Flex 处理内部排列。两者结合，简洁高效地完成响应式页脚布局。不复杂但容易忽略细节。
