flex 布局两端对齐当最后一排数量不够时，会出现以下布局情况
如图所示排布情况
这时，我们可以下面after伪类，解决最后一排数量不够两端分布的情况
.tem-flex{
display: flex;
flex-wrap: wrap;
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;
}
最终效果，完美解决两端对齐布局混乱的情况
在这里插入图片描述
当然，如果布局每列有4个，5个可以以此类推，举一反三
flex 布局两端对齐当最后一排数量不够时，会出现以下布局情况 这时，我们可以下面after伪类，解决最后一排数量...
flex布局 justify-content：space-between； 解决最后一排数量不够自动向两端排列问题...
手写clearfix flex布局 flex-direction 主轴的方向 justify-content 主轴...
Flex弹性布局 父元素 主轴对齐 justify-content flex-start 、flex-end、ce...
一、justify-content对齐问题描述 在CSS flex布局中，justify-content属性可以控...
一、背景 在flex布局中，我们使用父级元素的display和justify-content来实现flex布局，并...
1.Flexbox布局： display:flex; justify-content:center; align-...
flex布局是为了让布局变得简单的一个东西。 flex布局的默认是首行左对齐。 justify-content 可...
伸缩布局display: flex; align-items:center; justify-content: c...
flex布局 justify-content：space-between; 是大家常用的方法，当需要flex-wr...
本文标题：flex布局 justify-content：space-bet
本文链接：https://www.haomeiwen.com/subject/xduumqtx.html
网友评论