css 布局 自然换行，最后一行左对齐
Posted 宇宙野牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 布局 自然换行，最后一行左对齐相关的知识，希望对你有一定的参考价值。
参考
CSS flex布局最后一行左对齐的常用方法
感谢这位博主
代码
.list
display: grid; // ←
justify-content: space-between; // ←
grid-template-columns: repeat(auto-fill, @item-width); // ←
grid-gap: 10px;
.item
width: @item-width; // ←
height: 338px;
margin-bottom: 10px;
flex布局最后一行左对齐的处理
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; }
以上是关于css 布局 自然换行，最后一行左对齐的主要内容，如果未能解决你的问题，请参考以下文章