Flex布局与Media Query结合可高效实现响应式设计，简化传统布局复杂性；2. Flex通过display: flex、flex-direction、justify-content等属性实现子元素自动伸缩与对齐，适应不同屏幕尺寸。
在现代网页设计中，响应式布局是确保网站在不同设备上良好显示的关键。CSS Flex布局与Media Query的结合使用，能高效实现灵活、自适应的页面结构。这种组合不仅简化了传统浮动和定位带来的复杂性，还提升了开发效率与维护性。
Flex布局的核心优势
Flex（弹性盒子）布局专为一维布局设计，适合对容器内的子元素进行对齐、分布和顺序控制。它能在不同屏幕尺寸下自动调整项目大小和位置，非常适合响应式需求。
- 容器设置 display: flex 后，子元素可自动伸缩以填充可用空间
- 通过 flex-direction 控制主轴方向，实现横向或纵向排列
- 利用 justify-content 和 属性定义占比、最小尺寸和增长比例
Media Query适配不同屏幕
Media Query允许根据设备特性（如视口宽度、设备方向等）应用不同的CSS规则。结合Flex，可以在不同断点调整布局结构。
- 常见断点：手机（
- 使用 定义响应规则
- 在小屏幕上将水平导航改为垂直堆叠，提升可读性
实际应用示例：响应式导航栏
以下是一个典型的响应式导航栏实现：
立即学习“前端免费学习笔记（深入）”；
现代商业数字化服务公司网站模板
下载
现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
.container {
display: flex;
flex-wrap: wrap;
}
.nav {
flex: 1;
}
.logo {
flex-basis: 100%;
}
@media (min-width: 768px) {
.logo {
flex-basis: auto;
}
.container {
flex-nowrap;
}
}
在手机端，logo占据整行，导航项换行显示；在平板及以上设备，整体变为一行，布局更紧凑。
卡片布局的响应式处理
电商或内容展示类页面常使用卡片布局。Flex配合Media Query可轻松实现列数变化：
.card-group {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 300px;
}
@media (max-width: 600px) {
.card {
flex: 1 1 100%;
}
}
当屏幕小于600px时，每张卡片占满整行；大屏下则根据容器自动分配数量，保持最小宽度。
基本上就这些。合理运用Flex的弹性特性和Media Query的条件控制，可以构建出既美观又实用的响应式界面，无需依赖JavaScript或第三方框架。
