CSS - 完美解决 flex 布局下，一行显示固定个数（平均分布）并且强制换行，超出后 “靠左“ 对其（详细解决方案，适用于 Web、Vue、React 等任何前端项目）

已于 2025-08-10 15:49:36 修改
阅读量1.7w 收藏 136
点赞数 25
CC 4.0 BY-SA版权
分类专栏： + CSS 文章标签： css flex justify-content 弹性布局 断行后靠左对齐
于 2023-04-10 15:06:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/129988694
+ CSS 专栏收录该内容
63 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍了如何使用CSS的flex布局，通过设置`justify-content`和计算元素宽度，实现断行后元素始终靠左排列且保持平均分布的效果。关键在于使用`flex-wrap:wrap`、`justify-content:flex-start`以及调整元素间的`margin`。代码示例提供了一种方法，可以自定义元素数量和间距，并能适应宽度变化。

前言

关于 flex 布局下 justify-content: xx，很多朋友都想让其换行后，靠左进行依次排列（默认会平均分布居中）。

本文实现了 纯 CSS （无任何 JS），实现 flex / justify-content 弹性布局下，断行后让元素始终靠左排序，

你可以一键复制示例，然后稍微改改样式就能使用。

如下图所示，该示例是一行显示 3 个（可自定义），宽度变化时保持 “平均分布”，超出部分 “居左” ，

并且，还可以随意设置各元素之间的 “间隙”，具体详见代码。

在这里插入图片描述

示例代码

推荐使用一键复制功能，避免漏选。

了解本专栏 订阅专栏 解锁全文
CSS - display flex 弹性布局实现一行仅显示 2 个，每行显示指定个数（设置 space-between / space-around 超出自动换行）详细示例代码
🏆 前端领域优质创作者
02-14 3万+
display flex css 一行显示两个，css弹性布局设置每行显示指定个数，css3 display: grid;弹性布局一行固定几个，列设置flex固定一行显示2个，CSS控制一行显示两个，css弹性布局设置每行显示指定个数，[CSS] 单列定宽的两列弹性布局，这个css是控制只有2个div在一行上么，css弹性布局+自动换行，flex布局 一行显示两个同宽、高的盒子 并 可以换行，flex布局每行显示固定个数，列设置flex固定一行显示2个，css - flex布局如何每行固定数量显示，CSS3
CSS3学习笔记总结，你值得拥有（呕心沥血之作，涵盖CSS3所有知识点）
孙叫兽的博客
08-21 4072
注意：本文演示的运行结果使用的是在线编译器，只显示body里面的内容，大家可以用浏览器进行查看完整效果包含head。 简介 CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。 CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。 一些最重要CSS3模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 边框 用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。
flex 布局：一行固定个数，超出换行（流式布局）
weixin_42017221的博客
10-24 6896
设置在父容器上的属性：display：flex，align-items(交叉轴对齐方式)，justify-content(主轴对齐方式)，flex-wrap(换行)。设置在子容器上的属性，通过 flex: 1，简写了 flex-grow、flex-shrink、flex-basis 三个属性。
flex布局: 一行显示固定个数,强制换行且均匀分布(超出的分布靠左)
热门推荐
EnidChann的博客
10-24 7万+
如图需求: 1. 一行显示3个 2. 强制换行 3. 宽度不写死 4. 高度固定 -- html <div class="mycards"> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"&g...
样式布局flex----一行五个元素，随着屏幕变化宽度发生改变
CC酱写前端的博客
07-29 5996
CSS flex布局
flex布局设置一行显示多个，水平布局，自动换行
weixin_44867717的博客
09-23 7256
场景：一行固定显示几个列表模块：水平布局，自动换行。
flex布局常用布局方式（一行显示固定个数，自动换行显示）
Serena_tz的博客
11-23 1万+
基于uni-app实现一行显示固定个数的元素，元素可以遍历生成的，并且自动换行显示，效果如下图所示。// 这里一行显示4个，所以是/4，一行显示几个就除以几 // 这里的60rpx = (分布个数4-1)*间隙20rpx, 可以根据实际的分布个数和间隙区调整 min-width: calc((100% - 60rpx) / 4); max-width: calc((100% - 60rpx) / 4); // 每行最右侧的那个不设置右外边距
flex 布局：实现一行固定个数，超出强制换行（流式布局）
艾米栗的代码天地
02-02 1万+
flex 布局基础知识回顾+ 常用应用
[css] flex布局 元素自动换行三列布局
最新发布
weixin_44405693的博客
05-24 2813
如图：要实现这种布局方法：方法三。
【无标题】flex布局: 一行显示固定个数,强制换行且均匀分布
kaissgf的博客
03-05 1333
.usergroup { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; .usergroup-item { border: 1px solid #fff; flex: 1; height: 153px; margin: 0 8px 8px 0; // 间隙为5px width: calc((100% - 24px) / 3)...
flex布局一行三个平均
08-15
- *3* [CSS - 完美解决 flex 布局下，一行显示固定个数（平均分布）并且强制换行，超出后 “靠左“ 对其（详细解决...](https://blog.csdn.net/weixin_44198965/article/details/129988694)[target="_blank" data-...
flex布局设置一行三个
08-30
- *2* *3* [CSS - 完美解决 flex 布局下，一行显示固定个数（平均分布）并且强制换行，超出后 “靠左“ 对其（详细解决...](https://blog.csdn.net/weixin_44198965/article/details/129988694)[target="_blank" ...
html和css基础整理
weixin_68658847的博客
09-03 773
html和css基础整理
flex布局平均分布且自动换行靠左排列
Demons的博客
05-08 6123
<view style="display: flex;justify-content: start;flex-wrap: wrap;"> <view class="" style="width: 250upx;height: 250upx;background-color: #007AFF;margin-top:20upx;text-align: center; flex: ...
Css——flex布局 设置一行个数
qq_43201350的博客
08-26 3023
Css——flex布局 设置一行个数
flex布局，最后一行靠左显示
酱子
06-26 5111
flex布局，最后一行靠左显示 // 最后一行靠左显示 flex-wrap: wrap; align-content: flex-start; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {
flex布局强制换行（flex-wrap:wrap）之后，去掉最下面一层多余的间隙。
a1783118的博客
11-21 3161
flex布局强制换行（flex-wrap）之后，去掉最下面一层多余的间隙。
SS - 完美解决 flex 布局下，一行显示固定个数（平均分布）并且强制换行，超出后 “靠左“ 对其（详细解决方案，适用于 Web、Vue、React 等任何前端项目）
qq_36990263的博客
10-19 655
随便新建一个 *.html 复制后直接运行，按照需求进行更改调试即可。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不秃头的媛

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值