利用 flex-direction 适配横竖屏布局，结合媒体查询动态调整流向；2. 使用 flex: 1 实现内容区自适应高度，避免固定值提升兼容性；3. 开启 flex-wrap 处理多行元素换行，配合 justify-content 实现均匀分布；4. 通过 align-items 和 justify-content 轻松实现垂直与水平居中。合理运用这些技巧可简化移动端布局，提升响应式效果和维护性。
在移动端开发中，CSS Flexbox 是布局的首选方案之一。它能有效解决不同屏幕尺寸下的元素排列、对齐和自适应问题，相比传统浮动或定位方式更灵活直观。以下是几个在移动端适配中使用 Flexbox 的实用技巧。
1. 使用 flex-direction 适配横竖屏布局
移动设备经常面临横屏与竖屏切换，利用 flex-direction 可以快速调整内容流向。
- 默认 flex-direction: column 适合小屏幕纵向排布，如导航、表单等。
- 在横屏或大一点的设备上，可切换为 row 实现横向展示，比如图片加文字说明。
- 结合媒体查询动态调整：
2. 利用 flex: 1 实现等高/自适应区域
在移动端常见“头部-内容-底部”结构，内容区域需要填满剩余空间。
- 给主内容区设置 flex: 1，使其自动撑开父容器的剩余高度。
- 示例：页面整体设为 flex 容器，header 和 footer 固定高度，main 占据中间全部空间。
- 避免使用固定 height 或 calc 计算，提升兼容性和维护性。
3. 使用 flex-wrap 处理多行元素响应式换行
标签、选项卡或多图展示时，内容可能超出屏幕宽度。
立即学习“前端免费学习笔记（深入）”；
- 开启 flex-wrap: wrap 允许子项自动换行。
- 配合 justify-content: space-between 或 flex-grow 让每行项目均匀分布。
- 控制最小宽度防止压缩过度：min-width: 100px 配合 flex: 1 1 auto 更佳。
4. 对齐与居中：移动端常用的垂直居中方案
Flexbox 最被称道的能力就是轻松实现居中对齐。
- 垂直居中图标与文字：display: flex; align-items: center;
- 完全居中提示框或加载动画：justify-content: center; align-items: center;
- 比传统的 margin 或 transform 方案更稳定，尤其在动态内容中表现优异。
基本上就这些核心技巧。合理使用 Flexbox 不仅简化了移动端布局代码，还能提升跨设备兼容性。关键是理解每个属性在不同场景下的行为，避免过度嵌套，保持结构清晰。不复杂但容易忽略。
