如何用css flex和wrap实现移动端自动换行-css教程-PHP中文网

如何用css flex和wrap实现移动端自动换行

P粉602998670

发布： 2025-10-11 12:34:01

原创

693人浏览过

使用Flexbox的flex-wrap实现移动端自动换行，通过设置容器display: flex和flex-wrap: wrap，配合子项宽度控制布局密度，可高效完成响应式排列。

如何用css flex和wrap实现移动端自动换行

在移动端实现自动换行，使用 CSS 的 Flexbox 配合 flex-wrap 是最简单高效的方式。只要容器启用了弹性布局并允许换行，子元素就能根据容器宽度自动折行排列。

1. 启用 Flex 容器并允许换行

给父容器设置 display: flex 和 flex-wrap: wrap，这样当子项超出容器宽度时，就会自动换到下一行。

关键代码：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 可选：设置子项之间的间距 */
}
.item {
  flex: 0 0 auto; /* 不拉伸，按内容或设定宽度显示 */
  width: 100px;   /* 可设固定宽，或用 min-width/max-width 更灵活 */
}

登录后复制

2. 控制子项宽度实现响应式换行

子项的宽度决定了每行能放几个。你可以用固定值、百分比，或结合 min-width 实现更自然的响应效果。

示例：等分布局，每项至少 80px，最多占 1/3 宽度

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}
<p>.item {
flex: 1 1 80px; /<em> grow, shrink, basis </em>/
min-width: 80px;
background: #eee;
text-align: center;
padding: 20px 0;
}

登录后复制

这种写法下，屏幕越宽，每行排得越多；变窄时自动减少数量甚至单列显示。