答案：Flex布局与媒体查询结合可实现响应式设计。通过设置容器display: flex及子项属性，配合@media在不同屏幕宽度下调整flex-direction、flex-wrap等，使页面在移动端垂直排列、桌面端水平排列，利用断点控制布局流向、间距和对齐方式，实现流畅的跨设备适配体验。
响应式设计中，Flex布局与CSS媒体查询（@media）结合使用，能高效适配不同屏幕尺寸。通过动态调整Flex容器和子项的排列方式、方向、对齐等属性，可以实现流畅的跨设备体验。
理解Flex布局基础
Flex布局由容器和项目组成。设置 display: flex 后，容器内的子元素自动成为弹性项目，支持灵活的空间分配。
常用属性包括：
- flex-direction：控制主轴方向（row / column）
- flex-wrap：是否换行（nowrap / wrap）
- justify-content：主轴对齐方式
- align-items：交叉轴对齐方式
- flex：子项的伸缩比例、最小尺寸和基准值
使用@media控制不同屏幕下的Flex行为
媒体查询允许根据设备特性（如宽度）应用不同的样式。结合Flex，可以在小屏幕上切换为垂直排列，在大屏幕上恢复水平排列。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.item {
flex: 1 1 200px; / 最小宽度200px，可伸缩 /
}
/ 平板及以上：两列布局 /
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
/ 手机端：垂直堆叠 /
@media (max-width: 767px) {
.container {
flex-direction: column;
}
.item {
flex: 1 1 100%;
}
}
在这个例子中，当屏幕小于768px时，容器变为纵向排列，每个项目占满整行；大于等于768px时，恢复横向并允许换行，形成多列流式布局。
优化移动端体验的关键技巧
实际开发中，除了改变方向，还可以调整间距、对齐方式和项目顺序来提升可用性。
- 利用 order 属性在小屏上重新排序内容优先级
- 设置 min-width 防止项目被过度压缩
- 配合 gap 在不同断点调整项目间距
- 使用 align-items 或 align-self 控制特定项目的垂直对齐
常见应用场景示例
导航栏响应式处理：
.nav {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.nav {
flex-direction: row;
justify-content: space-around;
}
}
卡片列表在移动端竖排，桌面端横排：
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px;
}
@media (max-width: 480px) {
.cards {
flex-direction: column;
}
.card {
flex: 1 1 100%;
}
}
基本上就这些。合理运用媒体查询与Flex组合，无需JavaScript也能构建出高度自适应的界面结构。关键是定义清晰的断点，并针对不同设备调整flex相关属性，让布局自然流动。不复杂但容易忽略细节，比如最小宽度和换行设置。
