使用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 搭建基本结构，通常包括版权信息、导航链接和社交媒体图标。
2. 利用 justify-content 控制主轴对齐
justify-content
决定子元素在主轴（默认为水平方向）上的分布方式。页脚中常用于左右内容对齐或居中导航。
space-between
：两端对齐，中间等距 —— 适合三栏布局
center
：所有内容居中 —— 适合简洁单行页脚
flex-start
：靠左对齐
flex-end
：靠右对齐
示例代码：
立即学习
“
前端免费学习笔记（深入）
”；
3. 使用 align-items 实现
垂直居中
align-items
控制交叉轴（垂直方向）的对齐。页脚中常见需求是让文字和图标始终垂直居中。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
center
：子元素垂直居中 —— 最常用
flex-start
：顶部对齐
flex-end
：底部对齐
stretch
：拉伸填满容器（默认）
添加 vertical alignment：
4. 响应式适配：移动端堆叠布局
在小屏幕上，三栏并排会拥挤。使用媒体查询切换为纵向排列。
此时
justify-content
变为垂直方向分布，可设为 center 让内容集中显示。
基本上就这些。掌握 flex 的对齐属性，配合简单媒体查询，就能做出实用又美观的响应式页脚。关键是理解主轴与交叉轴的作用，再根据设计目标选择合适的对齐方式。不复杂但容易忽略细节。
.footer {
display: flex;
justify-content: space-between;
padding: 1rem 2rem;
background: #333;
color: white;
flex-wrap: wrap;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
@media (max-width: 768px) {
.footer {
flex-direction: column;
text-align: center;
gap: 12px;
}
.footer-center a {
margin: 0 8px;
}
}