使用Flexbox结合媒体查询和flex-wrap可实现响应式布局。设置flex-wrap:wrap允许子项在空间不足时换行，配合flex属性定义项目最小宽度（如flex:1 1 250px），在不同屏幕下自动调整排列。通过媒体查询在断点处修改样式，如768px以下缩小项目宽度，480px以下改为flex-direction:column垂直堆叠，适用于卡片、导航、表单等场景，仅用CSS即可实现高效自适应设计。
弹性盒子布局（Flexbox）结合媒体查询和 flex-wrap 能高效实现响应式设计。通过在不同屏幕尺寸下调整容器的换行方式与子项排列，可以让页面在手机、平板和桌面设备上都保持良好视觉效果。
使用 flex-wrap 控制换行
默认情况下，flex 容器中的子元素不会换行，即使空间不足也会被压缩。设置 flex-wrap: wrap 允许子项在空间不够时自动换行，是实现自适应的基础。
常见用法：- flex-wrap: nowrap —— 不换行（默认）
- flex-wrap: wrap —— 换行，第一行在上方
- flex-wrap: wrap-reverse —— 换行，第一行在下方
通常配合 flex-direction: row 使用，让内容横向排列、纵向换行。
结合 media 查询调整断点
通过 media 查询，在不同屏幕宽度下调整 flex 项目的宽度和换行行为，实现响应式布局。
立即学习“前端免费学习笔记（深入）”；
示例：三栏布局在小屏变为单栏
.container {
display: flex;
flex-wrap: wrap;
}
<p>.item {
flex: 1 1 300px; /<em> 最小宽度约300px，可伸缩 </em>/
}</p><p>/<em> 平板或更小 </em>/
@media (max-width: 768px) {
.item {
flex: 1 1 200px;
}
}</p><p>/<em> 手机竖屏 </em>/
@media (max-width: 480px) {
.container {
flex-direction: column;
}
.item {
flex: 1 1 100%;
}
}</p>当容器宽度不足以容纳所有项目时，由于设置了 flex-wrap: wrap，项目会自动换行。在超小屏幕上，改为垂直堆叠，提升可读性。
灵活控制项目尺寸与对齐
配合 min-width 和 flex 属性，可以设定项目最小宽度，触发换行更自然。
- 使用 flex: 1 1 250px 表示项目可伸缩，但最小为250px
- 当容器宽度小于所有项目最小宽度总和时，flex-wrap 会触发换行
- 配合 justify-content 和 align-items 可控制主轴与交叉轴对齐方式
实际应用场景
这种模式适合用于：
- 图片或卡片网格展示
- 导航菜单响应式折叠
- 表单字段在小屏垂直排列
不需要 JavaScript，仅靠 CSS 就能实现流畅的自适应体验。
基本上就这些 —— 利用 flex-wrap 让内容流动，再通过 media 查询在关键断点调整样式，就能构建出简洁高效的响应式布局。不复杂但容易忽略细节。
