在容器中使用flex布局一个列数固定行数不定的格子（大小都一样）展示区域（即格子的个数不定），我们该如何更优雅的处理边距？
因为只有容器中最右一列和最下一行的格子分别需要单独处理一下右边距和下边距，我们很自然的想到使用css选择器，咦，好像最后一行不太好选，那就改为处理第一行吧，使其它元素使用margin-top来增加边距就好了。
html
<div class="coontainer clearfix">
<!-- n个如下的div -->
<div class="item">item</div>
</div>
css
/* 使用选择器重置最后一列格子右边距为0 */
.item:nth-child(3n){
margin-right: 0;
}
/* 重置第一行格子的上边距为0 */
.item:nth-child(-n+3){
margin-top: 0;
}
nth-child()使用进阶 : 级联使用的nth-child
/* 使用选择器重置最后一行的格子下边距为0 */
.item:nth-child(3n+1):nth-last-child(-n+3),
.item:nth-child(3n+1):nth-last-child(-n+3)~.item{
margin-bottom: 0;
}
原来css选择器还可以级联使用！当然我们都知道css选择器是从右向左匹配的，那么上面这个是什么意思呢？nth-last-child(-n+3)选择的是容器中的最后3个元素，nth-child(3n+1)选择第（3n+1）个元素，也就是第一列的元素（因为每行展示3个元素，多以两种选择都合3有关），两者的交集恰好就是最后一行的第一个元素，也就是左下角的这个元素。但是最后一行的元素个数也并不确定，为了完整的匹配到其后的元素，我们使用通用兄弟选择器~来选中该目标后面的兄弟元素，这样两者结合便可以保证总是找全最后一行的元素，而不用管该行是否占满。
