flex布局解决最后⼀排数量不够⾃动向两端排列问题
flex布局 justify-content:space-between; 解决最后⼀排数量不够⾃动向两端排列问题
flex 布局两端对齐当最后⼀排数量不够时,会出现以下布局情况
这时,我们可以下⾯after伪类,解决最后⼀排数量不够两端分布的情况
.tem-flex{
display: flex;
flex-wrap: wrap;
flex布局对齐方式justify-content:space-between;
text-align: justify;
}
<!--加上after伪类,解决最后⼀排数量不够两端分布的情况-->
.tem-flex:after{
content: '';
width: 30%;
border:1px solid transparent;
}
.tem-list{
width:30%;
border:1px solid #ff6600;
margin-bottom: 10px;
}
最终效果,完美解决两端对齐布局混乱的情况
but 我亲⾃后发现这个只适合三列的,四列 五列还是不⾏
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论