盒子flex浮动布局并且换行后左对齐

今天有人问到下面这样一个问题

他想要的效果：

而他做出来的效果是：

他这个是flex布局，完了外层的盒子给了个 justify-content: space-between; 样式，这样大盒子里每个小视图块就均分了，但是换行后假如每行只能排4个，如果下一行不够4个，被两端对齐。

给出我的做法：

1、基本思路是外层容器flex布局，让内部的每个小容器从左向右按顺序排列（justify-content: flex-start;），并且允许换行（flex-start;flex-wrap: wrap;）；

2、内层容器为了占满每一行，每个小容器用宽度用 calc()计算宽度。

例如每行布局4个，宽度写法：width: calc((100% - 36px) / 4);

取外层宽度100%-内层4个小容器的中间3个间距，我这里每个是12px，剩下的宽度就是每行分布的所有容器占据的总宽度，除以4就是每个宽度。

3、最后加个 :nth-of-type(4n+0){margin-right: 0;} ，作用是让每间隔4个内部小容器中最后一个的右间距为0，避免占用父容器的宽度。

css部分：

.content {
   width: 800px;margin: 50px auto;}
/*重点是下面几行样式*/
.outer-box {
   display: flex;justify-content: flex-start;flex-wrap: wrap;