「css」flex布局，前几行space-between，最后一行左对齐的实现

核心代码：

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div class="last">8</div>
</div>

.container {
    margin: 0 auto;
    width: 420px;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: greenyellow;
}
.container div {
    border: 1px solid darkred;
    width: 100px;
    height: 200px;
    font-size: 30px;
    flex-shrink: 0;
    box-sizing: border-box;
    background: rosybrown;
}
.container::after {
    // 这里的100px，是一个整块的宽度
    flex: 0 0 100px;
    content: '';
}

效果图：

思路：

• 有两种解法：
  1. 对::after设置flex:1;使其扩充整个剩下的领域，这样最后一行就会变成flex-start的布局，5/6/7三个方块之间不会有任何的间距，这不是我想要的。
  2. flex-basis属性设置为固定的控件，这样一来::after就会在主轴上占据固定的空间宽度，相当于多了一个看不到的占位符，并且也不会破坏整体的space-between布局。
  • 但是这样有一个坏处，就是flex-basis的值要写死，并且不能参与进间隔的计算，也就是，只适用于最后一行缺一个的情况。
  • 如果遇到的是最后一行缺的个数不一定的情况的话，还是使用flex: 1;然后nth-last-child(1)这样的方式手动设置边距比较好。但是这也意味着整体不能使用space-between了