[随笔]flex布局使⽤space-between尾⾏排版效果优化问题：有7个元素，需要排列成两⾏，整体要求两端对齐，尾⾏不⾜需向左对齐排列。
七个元素：
<ul class="the-ul" >
<li>我是⼦元素</li>
<li>我是⼦元素</li>
<li>我是⼦元素</li>
<li>我是⼦元素</li>
<li>我是⼦元素</li>
<li>我是⼦元素</li>
<li>我是⼦元素</li>
</ul>
CSS效果：
.the-ul{
display: block;
margin: 0 auto;
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.the-ul > li{
display: inline-block;
width: 180px;
font-size: 18px;
font-weight: 400;
color: #2F2F2F;
line-height: 48px;
text-align: left;
}
/* 重写点样式↓ */
.the-ul > li::before{
display: inline-block;
content:"●";/* '\25CF' */
flex布局对齐方式
padding-right: 10px;
color: #ccc;
font-size: 10px;
}
使⽤ space-between 效果和预期会有区别
由于space-between就是两端布局，当最后⼀⾏不满四个的时候，会分布在两端。
解决⽅案：使⽤ ::after 伪元素(width属性值为⼦元素宽度)
添加 CSS 代码控制
.the-ul::after{ content:''; width: 180px;
}
效果
解决⽅法参考

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