弹性布局自动排列DIV

还有一种更好的方法地址在最后面（grid）

设好宽高子盒子自动适应位置

父级是蓝色，子集是绿色
父级：

display: flex;//弹性布局
justify-content: space-between;//中间空隙自适应
flex-wrap: wrap;//自适应分行
width: 550px;
height: 250px;
background-color: #0076CB;

子集：

width: 150px;
height: 100px;
background-color: #008855;

这样会有一个问题，如果最后一行数量不够3个（这三个不是固定的看一行需要方几个了），那么排版间隙就会有问题

解决办法：

//添加空白占位符，可创建一个 width 和上面盒子一个宽的height 为0的class
.list{
	width:150px;
	height:0
}

不够三个就用占位符凑齐三个

//第一行子集盒子
<div class="subset" >....</div>
<div class="subset" >....</div>
<div class="subset" >....</div>
//第二行
<div class="subset" >....</div>
<div class="list" ></div>
<div class="list" ></div>

如果是动态加载则需要加判断：

//例如后台返回的数据是 data
var num = 3;//每行展示几个盒子
// 取余判断最后一行有几个
var list_length = data.length % num;
//计算需要加几个占位DIV
var add_num = num - list_length ;
//使用 for 循环添加占位DIV
$('#XXX').append('<div class="list" ></div>')

弹性布局grid排列DIV