flex布局最後一行左對齊的處理
阿新 • • 發佈：2017-11-07
根據 attr tween pre style mar itl spa ttr
1、添加幾個空item（用於大多數場景）
根據布局列數添加空item，比如每行最大n列，那麽在最後添加n個空item即可
<html> <style> .item { width: 32%; background-color: #00abff; height: 60px; margin-top: 10px; } .itemempty { height: 0px; width: 32%; } .box { display: flex; justify-content: space-between; flex-wrap: wrap; } </style> <body> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="itemempty"></div> <div class="itemempty"></div> <div class="itemempty"></div> </div> </body> </html>
2.利於after（適用於每行列數確定的場景）
.box:after{ content: ""; flex: auto; }
flex布局最後一行左對齊的處理