Flex布局可彻底解决页脚粘性、等高列、响应式对齐三大痛点：通过flex-direction:column+flex:1实现Sticky Footer；用display:flex+align-items:stretch保障页脚多栏等高；借助flex-wrap与媒体查询轻松切换横竖排布，现代浏览器兼容良好。
页脚难设计，往往不是因为样式复杂，而是布局逻辑没理清。用 Flex 布局能从根本上解决“粘性底部”“等高列”“响应式对齐”这些经典痛点，不需要 JS、不用 hack、语义清晰、维护简单。
让页脚始终贴底（Sticky Footer）
传统方案靠 margin/padding 模拟，容易在内容少时留白，内容多时又重叠。Flex 可以让主体区域自动撑满剩余高度：
- 给 html 和 body 设
height: 100% - 给页面容器（如
.page）设display: flex; flex-direction: column; min-height: 100vh; - 给主要内容区（如
.main）加flex: 1，它会自动占据所有剩余空间 - 页脚（
.footer）自然被“推”到底部，不占额外高度也不浮动
页脚内多栏内容等高且对齐
比如“关于我们｜联系方式｜友情链接”三列，在不同文字长度下保持顶部对齐、高度一致：
- 给页脚容器设
display: flex，默认就是align-items: stretch，子项自动等高 - 用
justify-content: space-between或space-around控制水平分布 - 每列内部用
display: flex; flex-direction: column;+justify-content: space-between，可让标题和链接在列内上下撑开
响应式切换：从横排到竖排
小屏下多栏挤在一起？Flex 天然支持断点切换：
立即学习“前端免费学习笔记（深入）”；
- 默认页脚设
flex-wrap: wrap，子项可换行 - 桌面端：设
flex-direction: row，并给各栏设固定或弹性宽度（如flex: 1） - 移动端：媒体查询中改
flex-direction: column，每栏独占一行，顺序仍由 HTML 决定，语义不变
兼容性与注意事项
现代浏览器（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+）均原生支持 Flex。若需支持 IE10/11，注意：
- 避免使用
flex: 1简写（IE 对flex-grow: 1解析不稳定），显式写flex: 1 1 auto - IE10 不支持
flex-wrap，多栏布局建议用display: table降级，或直接单列显示 - 避免在 flex 容器上同时设
min-height和height，可能导致计算冲突
