盒子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;}
.outer-box .inner-item {
　　width: calc((100% - 36px) / 4);
　　height: 120px;
　　margin-right: 12px;
　　margin-bottom: 14px;
　　background: #66d9b5;
}
.outer-box .inner-item:nth-of-type(4n+0){margin-right: 0;}

html部分：

<div class="content">
    <div class="outer-box">
        <div class="inner-item">
            <div>我是内容</div>
        </div>
        <div class="inner-item">
            <div>我是内容</div>
        </div>
        <div class="inner-item">
            <div>我是内容</div>
        </div>
        <div class="inner-item">
            <div>我是内容</div>
        </div>
        <div class="inner-item">
            <div>我是内容</div>
        </div>
        <div class="inner-item">
            <div>我是内容</div>
        </div>
    </div>
</div>

最终效果：