答案：CSS弹性盒子与媒体查询结合可实现响应式布局。通过display: flex设置容器，利用flex-direction、justify-content等属性控制排列，配合@media根据屏幕尺寸调整样式，如桌面三列、平板两列、手机堆叠，实现自适应效果。
在现代网页设计中，CSS弹性盒子（Flexbox）与媒体查询（Media Query）结合使用，是实现响应式布局的常用方式。通过Flexbox可以轻松控制元素的排列、对齐和空间分配，而Media Query则能根据设备屏幕尺寸调整样式，两者配合能让页面在不同设备上都保持良好的视觉效果。
弹性盒子的基本结构
Flexbox的核心是将容器设置为display: flex，从而让其子元素成为弹性项目，自动沿主轴排列。
常见属性包括：
- flex-direction：定义主轴方向（row、column等）
- justify-content：控制主轴上的对齐方式
- align-items：控制交叉轴上的对齐方式
- flex-wrap：允许项目换行
- flex：设置项目的放大、缩小和基础大小
例如：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.item {
flex: 1 1 200px; /* 最小宽度200px，可伸缩 */
}
用Media Query适配不同屏幕
Media Query可以根据视口宽度应用不同的CSS规则，配合Flexbox能实现动态布局变化。
比如在大屏幕上使用横向排列，在小屏幕上改为纵向或调整项目宽度：
/* 桌面端：每项至少300px，最多三列 */
@media (min-width: 1024px) {
.container {
flex-direction: row;
}
.item {
flex: 1 1 300px;
}
}
/ 平板：每项至少200px，最多两列 /
@media (max-width: 1023px) {
.container {
flex-direction: row;
}
.item {
flex: 1 1 200px;
}
}
/ 手机：垂直排列或单列 /
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.item {
flex: none;
width: 100%;
}
}
实际应用场景示例
一个常见的卡片布局可以在不同设备上有不同表现：
- 桌面：一行三张卡片，居中对齐
- 平板：一行两张，间距均匀
- 手机：堆叠成一列，占满全宽
只需调整flex值和flex-direction，再配合gap和width，就能实现流畅过渡。
基本上就这些，灵活运用Flexbox和Media Query，不需要JavaScript也能做出专业级响应式页面。关键在于合理设置断点和弹性规则，让内容自然流动。
