今天有人问到下面这样一个问题
他想要的效果：
而他做出来的效果是：
他这个是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>
最终效果：
