使用Flexbox实现响应式页脚布局，通过justify-content和align-items控制对齐，结合媒体查询适配移动端。1. HTML结构包含左中右三部分；2. justify-content: space-between实现两端对齐；3. align-items: center确保垂直居中；4. @media下flex-direction: column使小屏堆叠显示，保持可读性与美观性。
实现一个响应式页脚布局，关键在于使用 Flexbox 布局模型合理控制对齐与排列。通过 align-items 和 justify-content 属性，可以轻松让页脚内容在不同屏幕尺寸下保持良好的视觉结构和可用性。
1. 使用 Flexbox 构建基础页脚结构
要创建响应式页脚，先用 HTML 搭建基本结构，通常包括版权信息、导航链接和社交媒体图标。
<footer class="footer">
<div class="footer-left">
© 2025 公司名称
</div>
<nav class="footer-center">
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">服务</a>
<a href="#">联系</a>
</nav>
<div class="footer-right">
<a href="#">?</a>
<a href="#">?</a>
<a href="#">?</a>
</div>
</footer>
2. 利用 justify-content 控制主轴对齐
justify-content 决定子元素在主轴（默认为水平方向）上的分布方式。页脚中常用于左右内容对齐或居中导航。
- space-between：两端对齐，中间等距 —— 适合三栏布局
- center：所有内容居中 —— 适合简洁单行页脚
- flex-start：靠左对齐
- flex-end：靠右对齐
示例代码：
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
.footer {
display: flex;
justify-content: space-between;
padding: 1rem 2rem;
background: #333;
color: white;
flex-wrap: wrap;
}
3. 使用 align-items 实现垂直居中
align-items 控制交叉轴（垂直方向）的对齐。页脚中常见需求是让文字和图标始终垂直居中。
- center：子元素垂直居中 —— 最常用
- flex-start：顶部对齐
- flex-end：底部对齐
- stretch：拉伸填满容器（默认）
添加 vertical alignment：
.footer {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
4. 响应式适配：移动端堆叠布局
在小屏幕上，三栏并排会拥挤。使用媒体查询切换为纵向排列。
@media (max-width: 768px) {
.footer {
flex-direction: column;
text-align: center;
gap: 12px;
}
.footer-center a {
margin: 0 8px;
}
}
此时 justify-content 变为垂直方向分布，可设为 center 让内容集中显示。
基本上就这些。掌握 flex 的对齐属性，配合简单媒体查询，就能做出实用又美观的响应式页脚。关键是理解主轴与交叉轴的作用，再根据设计目标选择合适的对齐方式。不复杂但容易忽略细节。
