流式布局

我的流失布局是用flex做的，但是有个致命问题，如果给justify-content: space-between;那么最后一行没办法左对齐。

固定列 以下都是4列为例

1.也就是我们不使用justify-content:space-between声明在模拟两端对齐效果。中间的gap间隙我们使用margin进行控制 这里有个选择器的使用nth-child(4n)就是选中4的倍数这个元素，not(:nth-child(4n))就是除此之外。

.container {
    display: flex;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
.list:not(:nth-child(4n)) {
    margin-right: calc(4% / 3);
}

2.由于每一列的数目都是固定的，因此，我们可以计算出不同个数列表应当多大的margin值才能保证完全左对齐。 假设每行4个元素，结果最后一行只有3个元素，则最后一个元素的margin-right大小是“列表宽度+间隙大小”的话，那最后3个元素也是可以完美左对齐的 .list:last-child:nth-child(4n - 1)说明最后一行，要么3个元素，要么7个元素…… .list:last-child:nth-child(4n - 2)说明最后一行，要么2个元素，要么6个元素…… 这里有个重点是选择器的使用last-child:nth-child(4n - 2)就是最后一个元素，和4n-2 的元素都必须同时满足。

.container {
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
/* 如果最后一行是3个元素 */
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2个元素 */
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

非固定列

1. 实现的关键就是占位的元素宽度设置得和.list列表元素一样即可，其他样式都不需要写 由于元素高度为0，因此，并不会影响垂直方向上的布局呈现 这里的重点就是多个嘘元素去占位

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <i></i><i></i><i></i><i></i><i></i>
</div>
 
.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 100px; height:100px;
    background-color: skyblue;
}
/* 和列表一样的宽度值 */
.container > i {
    width: 100px;
}

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>
 
.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;
}