位置: IT常识 - 正文

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

编辑：rootadmin

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

推荐整理分享CSS - 完美解决 flex 布局下，一行显示固定个数（平均分布）并且强制换行，超出后 “靠左“ 对其（详细解决方案，适用于 Web、Vue、React 等任何前端项目）(css flaot)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:css.,css小技巧,css.,css effect,css主要解决什么问题,css中常见问题及解决办法,css中常见问题及解决办法,css中常见问题及解决办法,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

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

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

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

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

示例代码

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

随便新建一个 *.html 复制后直接运行，按照需求进行更改调试即可。

<body> <section class="content"> <div class="item">元素</div> <div class="item">元素</div> <div class="item">元素</div> <div class="item">元素</div> <div class="item">元素</div> <div class="item">元素</div> <div class="item">元素</div>  </section></body><style>.content { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start;/* 替代space-between布局方式 */}.item { flex: 1; height: 120px; background-color: #cacaca; /* 间隙为5px */ margin: 0 5px 5px 0; /* END */ /* 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */ width: calc((100% - 10px) / 3); /* END */ /* 加入这两个后每个item的宽度就生效了 */ min-width: calc((100% - 10px) / 3); max-width: calc((100% - 10px) / 3); /* END */}.item:nth-child(3n) { /* 去除第3n个的margin-right */ margin-right: 0;}</style>

具体请看代码注释，多做修改调试达到您想要的效果。

本文链接地址:https://www.jiuchutong.com/zhishi/288766.html 转载请保留说明！

上一篇：安大略省的圣诞树农场，加拿大 (© FatCamera/Getty Images Plus)(安大略省节日)

下一篇：蒂内河畔圣艾蒂安小镇，法国阿尔卑斯省 (© CAVALIER Michel/hemis.fr/Alamy Stock Photo)