前言
关于 flex 布局下 justify-content: xx,很多朋友都想让其换行后,靠左进行依次排列(默认会平均分布居中)。
本文实现了 纯 CSS (无任何 JS),实现 flex / justify-content 弹性布局下,断行后让元素始终靠左排序,
你可以一键复制示例,然后稍微改改样式就能使用。
如下图所示,该示例是一行显示 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>
<!-- <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>
具体请看代码注释,多做修改调试达到您想要的效果。