flex 弹性盒子布局多行，最后一行不占满的技巧

在不清楚盒子宽度和盒子内容的宽度的时候，可以采用以下技巧进行布局。

适用情景：

该情景也就是如下描述：

1. 每行1个以上的盒子
2. 最后一行不占满盒子
3. 盒子和外层容器的宽度都为百分比或者不确定，只是确定每行摆放多少个盒子。

解决代码思路：

1. 外层容器给弹性盒子布局, 且给外层盒子一个after伪类元素。

.container {
  display: flex;
  justify-content: space-between; //两边布局
  flex-wrap: wrap; //换行
}
// 可以理解为占位
.container::after {
  content: '';
  width: 30%; 
  height: 0;
  visibility: hidden;
}

2. 给容器内的盒子宽度按照100%等分，比如每行三个盒子就可以给30%，四个盒子就可以给25%, 高度可以由固定内容撑开最好，也可以自己给固定高度。

.item {
    width: 30%;
}

这样就可以完成上面要求的布局了。

注意：

1. 容器内的盒子不要单独封装成组件，否则设置宽度百分比不生效。
2. 如果每行是偶素个盒子，需要实现盒子间的间距可以先占满之后使用padding填充即可，不过要求盒子背景和容器背景色一致。
3. 如果不给上面占位，又使用justify-content： flex-start; 去布局，在用padding-left调整位置，在多端设备中会是很糟糕的体验。
4. 上面占位的伪类如果不给，就会是下面的结果。