flex弹性盒布局怎样实现元素左对齐的效果？

　　这篇文章给大家分享的是关于flex弹性盒布局的内容，下文实现的效果是元素左对齐，也就是八张图的九宫格，最后一行要实现左对齐的效果，那么具体怎样做呢？下面我们详细的了解看看。
 
　　使用flex布局，如果是九宫格的话正好可以平分， 
 
　　如果是我们只需要八块， 
 
　　但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after， 
 
　　<div class="box">
　　 <ul>
　　 <li></li>
　　 <li></li>
　　 <li></li>
　　 <li></li>
　　 <li></li>
　　 <li></li>
　　 <li></li>
　　 <li></li>
　　 </ul>
　　</div>
　　ul{
　　 display: flex;
　　 flex-wrap: wrap;
　　 justify-content: space-between;
　　}
　　ul:after{
　　 content: "";
　　 width: 32%;
　　}
　　ul li{
　　 width: 32%;
　　 height: 10vh;
　　 margin-bottom: 1vh;
　　 background: #2fbaff;
　　}