如何通过css flexbox与media query实现多行排列-css教程-PHP中文网

如何通过css flexbox与media query实现多行排列

P粉602998670

发布： 2025-10-13 13:24:01

原创

214人浏览过

使用 Flexbox 的 flex-wrap 和 Media Query 可实现响应式多行布局，通过设置容器 display: flex、flex-wrap: wrap 及 gap 间距，结合不同屏幕断点调整 item 的 flex 值，使项目在手机、平板、桌面等设备上分别显示 1、2、3~4 列，适用于卡片、产品列表等场景。

如何通过css flexbox与media query实现多行排列

要实现多行排列并根据不同屏幕尺寸调整布局，可以结合 CSS Flexbox 和 Media Query。这种方式灵活、响应式强，适合现代网页设计。

使用 Flexbox 实现多行排列

通过 flex-wrap: wrap 允许 flex 项目在空间不足时换行，形成多行布局。

基本结构如下：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 项目之间的间距 */
}
<p>.item {
flex: 1 1 200px; /<em> 可扩展、可收缩，最小宽度约200px </em>/
}</p>

登录后复制

说明：

立即学习“前端免费学习笔记（深入）”；

display: flex 启用弹性布局
flex-wrap: wrap 允许子元素换行
flex: 1 1 200px 表示每个项目最小宽度为 200px，可根据容器伸缩
gap 设置项目之间的间距，更简洁于使用 margin

使用 Media Query 调整不同屏幕下的排列

在不同设备上控制每行显示的项目数量，可通过 media query 调整 flex-basis 或容器样式。

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

/* 小屏幕（手机） - 每行1个 */
@media (max-width: 480px) {
  .item {
    flex: 1 1 100%;
  }
}
<p>/<em> 平板 - 每行2个 </em>/
@media (min-width: 481px) and (max-width: 768px) {
.item {
flex: 1 1 calc(50% - 8px);
}
}</p><p>/<em> 桌面 - 每行3~4个 </em>/
@media (min-width: 769px) {
.item {
flex: 1 1 calc(33.333% - 12px);
}
}</p>

登录后复制

提示：

使用 calc() 扣除 gap 带来的间距影响
可以根据设计需求调整断点值（如 768px、992px）
配合 justify-content 控制主轴对齐方式，如 space-between、center

实际应用场景示例

常用于产品列表、卡片网格、相册展示等需要响应式多行排列的场景。

例如一个三列卡片布局：

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}
<p>.card {
flex: 1 1 calc(33.333% - 20px);
background: #f0f0f0;
padding: 20px;
border-radius: 8px;
}</p><p>@media (max-width: 768px) {
.card {
flex: 1 1 calc(50% - 10px);
}
}</p><p>@media (max-width: 480px) {
.card {
flex: 1 1 100%;
}
}</p>

登录后复制

基本上就这些。关键是利用 flex 的弹性与 wrap 换行特性，再通过 media query 控制不同设备下的显示效果。不复杂但容易忽略细节，比如 gap 和 calc 的配合使用。

以上就是如何通过css flexbox与media query实现多行排列的详细内容，更多请关注php中文网其它相关文章！