使用 Flexbox 的 flex-wrap 和 Media Query 可实现响应式多行布局，通过设置容器 display: flex、flex-wrap: wrap 及 gap 间距，结合不同屏幕断点调整 item 的 flex 值，使项目在手机、平板、桌面等设备上分别显示 1、2、3~4 列，适用于卡片、产品列表等场景。
要实现多行排列并根据不同屏幕尺寸调整布局，可以结合 CSS Flexbox 和 Media Query。这种方式灵活、响应式强，适合现代网页设计。
使用 Flexbox 实现多行排列
通过 flex-wrap: wrap 允许 flex 项目在空间不足时换行，形成多行布局。
基本结构如下：
.container { display: flex; flex-wrap: wrap; gap: 16px; /* 项目之间的间距 */}.item {flex: 1 1 200px; / 可扩展、可收缩，最小宽度约200px /}
说明：
立即学习“前端免费学习笔记（深入）”；
display: flex 启用弹性布局flex-wrap: wrap 允许子元素换行flex: 1 1 200px 表示每个项目最小宽度为 200px，可根据容器伸缩gap 设置项目之间的间距，更简洁于使用 margin
使用 Media Query 调整不同屏幕下的排列
在不同设备上控制每行显示的项目数量，可通过 media query 调整 flex-basis 或容器样式。
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情
/* 小屏幕（手机） - 每行1个 */@media (max-width: 480px) { .item { flex: 1 1 100%; }}/ 平板 - 每行2个 /@media (min-width: 481px) and (max-width: 768px) {.item {flex: 1 1 calc(50% - 8px);}}
/ 桌面 - 每行3~4个 /@media (min-width: 769px) {.item {flex: 1 1 calc(33.333% - 12px);}}
提示：
使用 calc() 扣除 gap 带来的间距影响可以根据设计需求调整断点值（如 768px、992px）配合 justify-content 控制主轴对齐方式，如 space-between、center
实际应用场景示例
常用于产品列表、卡片网格、相册展示等需要响应式多行排列的场景。
例如一个三列卡片布局：
.card-container { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px;}.card {flex: 1 1 calc(33.333% - 20px);background: #f0f0f0;padding: 20px;border-radius: 8px;}
@media (max-width: 768px) {.card {flex: 1 1 calc(50% - 10px);}}
@media (max-width: 480px) {.card {flex: 1 1 100%;}}
基本上就这些。关键是利用 flex 的弹性与 wrap 换行特性，再通过 media query 控制不同设备下的显示效果。不复杂但容易忽略细节，比如 gap 和 calc 的配合使用。
以上就是如何通过css flexbox与media query实现多行排列的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1014949.html
微信扫一扫 
支付宝扫一扫 
