flex布局如何最后⼀⾏左对齐并且间距相同
flex布局 设置justify-content: space-between后最后⼀⾏会如下这样：
解决：可以在⽗元素添加after伪类，并在⼦元素⾥添加动态类名，t.length是⼦元素总数，判断最后⼀⾏余⼏个，以下是⼀⾏四个为例：
:
class="(t.length%4)==3?'three-product':''||(t.length%4)==2?'two-product':''||(t.length%4)==0?'zero-product':''"
.hydrated{
display:flex;
justify-content: space-between;
flex-wrap: wrap;
&::after{
content:"";
flex: auto;
}
.three-product{
&:nth-last-of-type(1),&:nth-last-of-type(2){
margin-left: 24px;
}
}
.two-product{
&:nth-last-of-type(1){
margin-left: 24px;
}
}
.zero-product{
&:nth-last-of-type(1),&:nth-last-of-type(2),&:nth-last-of-type(3){
margin-left: 24px;
}
}
.tb-cell{
width: 23%;
height:270px;
margin-bottom: 10px;
background:rgba(255,255,255,1);
flex布局对齐方式
box-shadow:0px 0px 10px 1px rgba(239,246,252,1);}
最后得到以下的效果

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