多个item自适应排列（flex最后一行左对齐）

flex 最后一行左对齐。项目布局上要求item两端对齐，而且最后一行在列不满的情况下要求左对齐。

初始状态如下图所示：item整体在父元素内部不是居中的！

初始状态.png

期望实现item在内容区域居中，在父元素上添加text-align:center;样式如下，很明显，不是我们所期待的：

item在内容区整体居中.png

这里需要补充一点：本来是在item上添加float:left实现的水平排列，但是影响到了其它模块，因此取消浮动设置display: inline-block;实现水平排列，原理就不多说了。

期望第二行左对齐的，于是尝试flex布局。第二行居然。。。

尝试flex 第二行两端对齐了.png

最后按照如下处理

.wrapItem{
    margin-top: 200px;
    background: yellowgreen;
    padding: 0 15%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.wrapItem::after{ //重要
    flex: auto;
    content: "";
}

第二行的间隙和第一行不一致导致。排查了很久发现是因为Item上设置了margin:5px。由于父元素设置了justify-content: space-between所以会覆盖margin:5px，所以导致两行间隔不一致。效果如下图所示：

间隔小问题.png

查看资料，解决方案有两种：

1. 添加空item元素保持两行数量一致。很显然，这种方案不是很合理，也不利于移动端适配。
2. 更改margin的值。这里我调整margin: 8px;。效果如下：

最终效果.png