关于使⽤display：flex的弹性布局，结合js实现最后⼀⾏⾃动
左对齐（跪求纯css实。。。
⼀个考验基本功的功能，⽽我现在也才⽤了最流⾏的⼀种⽅法，希望看到的有思路的可以写下⾃⼰的做法，⼀整段代码如下：
实现思路：通过获取⽗元素的宽度以及⼦元素宽度进⾏⼀系列计算，补齐最后⼀⾏，达到justify-content：wrap的时候，依旧完美左对齐
<html>
<head>
<title></title>
<style>
flex布局对齐方式.input1{
width: 100px;
}
.parent{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
width: 387px;
border: solid 1px #000;
}
.parent div{
width: 80px;
height: 80px;
}
.child1{
background: yellow;
}
.child2{
background: rgb(234, 0, 255);
}
.child3{
background: pink;
}
.child4{
background: rgb(255, 187, 0);
}
.child5{
background: green;
}
.child6{
background: rgb(0, 195, 255);
}
.childBlank{
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
<div class="child5"></div>
<div class="child6"></div>
</div>
</body>
<script src="cdn.bootcss/jquery/3.4.1/jquery.min.js"></script>
<script src="cdn.bootcss/jquery/3.4.1/jquery.min.js"></script>
<script>
function calcChild(){
console.log(1234568888)
var parentWidth = $(".parent").width();
var childWidth = $(".parent div").width();
var sumChild = $(".parent div").length;
console.log(parentWidth,childWidth,sumChild);
//每⾏最多个数
var maxNum = Math.floor(parentWidth/childWidth);
console.log(maxNum);
//最后⼀⾏缺多少个
if(sumChild > 0){
var needAddNum = (sumChild%maxNum);
console.log(needAddNum);
for(var i = 0;i<needAddNum;i++){
$(".parent").append("<div class='childBlank'></div>");
}
}
}
calcChild()
</script>
</html>
复制代码就能看效果了，可是代码并没有实现监控⽗元素宽度变化，⽽去改变⼦元素的补充个数问题，⼤家可以⾃⼰捣⿎捣⿎。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。