使用Flexbox和Media Query可实现响应式页脚布局：通过设置flex容器的justify-content属性控制对齐，结合不同屏幕断点调整布局结构，桌面端用space-between或space-around横向分布内容，移动端改为垂直排列并居中显示，提升可读性。
要实现响应式页脚布局，可以结合 Flexbox 的 justify-content 属性和 media query 来灵活控制不同屏幕尺寸下的对齐方式与结构。这种方法简洁高效，适用于大多数现代浏览器。
使用 Flexbox 布局基础
将页脚设为 flex 容器后，能轻松控制子元素的排列和对齐：
footer {
display: flex;
justify-content: space-between; /* 左右两端对齐 */
align-items: center;
padding: 20px;
background-color: #333;
color: white;
}
在桌面端，space-between 可让页脚左右两侧内容贴边，中间留白均匀分布。适合放置版权信息在左，社交图标或导航链接在右。
通过 Media Query 调整移动端布局
当屏幕变窄时，保持两端对齐可能造成文字挤压。用 media query 切换对齐方式更合理：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
footer {
flex-direction: column;
text-align: center;
gap: 10px;
}
footer > * {
margin: 0;
}
}
在小屏幕上，改为垂直排列，justify-content 自然失效，但可通过 text-align: center 和 gap 控制间距，提升可读性。
结合断点动态调整对齐策略
不同设备可设置多个断点，精细控制布局表现：
- 大于 992px：使用 space-between，横向分布内容
- 576px ~ 991px：改用 space-around，保证每项周围有均衡空间
- 小于 576px：切换为列布局，居中显示
示例：
@media (min-width: 992px) {
footer { justify-content: space-between; }
}
@media (min-width: 576px) and (max-width: 991px) {
footer { justify-content: space-around; }
}
基本上就这些。利用 flex 的弹性对齐和 media query 的条件判断，能快速构建适配多端的页脚，不复杂但容易忽略细节。
