flex布局实现整体居中最后一行靠左

前几天要实现一个功能，页面要根据屏幕的宽度来决定一行显示几个元素，我最先想到的是左浮动，但左浮动时整体内容靠左不居中，很不美观，所以想要让页面不管显示几个元素，整体都是居中的。然后使用了flex布局来实现，但最后一行不满时，元素会贴两边展示，还是很难看。最后使用媒体查询实现了这个效果，但感觉这种实现方法很菜，后对此进行了研究。

一、使用额外的空白标签给增加一行

在flex布局容器中加入额外的标签，使容器内增加一行没有高度的空白元素，这样我们本来的元素就跑到了倒数第二行中。

使用足够的空白标签进行填充占位，具体的占位数量是由最多列数的个数决定的，例如这个布局最多7列，那我们可以使用7个空白标签进行填充占位，最多10列，那我们需要使用10个空白标签。

如下HTML示意：

<div class="container">
    <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>
    <i></i><i></i><i></i><i></i><i></i>
</div>

相关CSS如下，实现的关键就是占位的<i>元素宽度和margin大小设置得和.list列表元素一样即可，其他样式都不需要写。

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.item {
    width: 100px; height:100px;
    background-color: skyblue;
    margin: 15px 10px 0 0;
}
/* 和列表一样的宽度和margin值 */
.container > i {
    width: 100px;
    margin-right: 10px;
}

由于<i>元素高度为0，因此，并不会影响垂直方向上的布局呈现。

二、使用grid布局

grid布局实现这个效果十分的方便，但完全不兼容ie浏览器，所以使用时要慎重。

.container {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-gap: 10px;
}
.list {
    width: 100px; height:100px;
    background-color: skyblue;
    margin-top: 5px;
}

在这里顺便提一下行内元素的最后一行靠左，可使用text-align-last来实现。