flexbox通过display:flex创建灵活布局，结合flex-direction、flex-wrap和媒体查询实现响应式设计，利用flex属性分配空间，配合justify-content与align-items控制对齐，轻松实现跨设备自适应布局。
Flexbox 是 css 中一种强大的布局模型，特别适合用来创建响应式网页设计。它能自动调整子元素的大小、位置和顺序，适应不同屏幕尺寸，无需依赖浮动或定位就能实现灵活的布局结构。
使用 Flex 容器定义主轴方向
要启用 Flex 布局，先将父容器设置为 display: flex，然后通过 flex-direction 控制子项排列方向，这对响应式切换布局很有帮助。
结合媒体查询，在小屏幕上把导航栏从横排改为竖排：
.nav { display: flex; flex-direction: row; } @media (max-width: 768px) { .nav { flex-direction: column; } }
利用 flex 属性控制子项伸缩性
子元素可以通过 flex: 1 等简写属性，让它们根据可用空间自动伸展或收缩，实现等宽分布或自适应填充。
立即学习“前端免费学习笔记（深入）”；
- flex: 1 让所有子项平分容器宽度
- flex: 0 0 200px 设置固定最小宽度，不伸缩
- 混合使用可创建“一边固定，一边自适应”的布局
例如侧边栏固定宽，内容区占满剩余空间：
.sidebar { flex: 0 0 250px; } .main-content { flex: 1; }
用 flex-wrap 和媒体查询优化多设备显示
默认情况下，Flex 子项会挤在一行。使用 flex-wrap: wrap 允许换行，配合媒体查询更灵活地适配屏幕。
- 大屏上三列并排，小屏上每行一列
- 给子项设置 min-width 触发自动换行
示例：卡片布局响应式换行
.card-container { display: flex; flex-wrap: wrap; gap: 16px; } .card { flex: 1 1 300px; /* 最小300px，达到后换行 */ }
对齐方式增强响应式体验
Flexbox 提供多种对齐属性，在不同屏幕下保持良好视觉效果。
- justify-content 控制主轴对齐（如 space-between 在大屏分散，center 在小屏居中）
- align-items 控制交叉轴对齐（垂直居中非常实用）
- align-content 多行时控制行间距分布
移动端按钮组居中显示：
.button-group { display: flex; justify-content: center; flex-wrap: wrap; }
基本上就这些核心技巧。Flexbox 结合媒体查询，能以极少代码实现复杂的响应式布局，关键是理解容器与项目的关系，以及如何通过 flex 属性动态分配空间。不复杂但容易忽略细节。