flex最后一行对齐问题

问题描述：

flex 中 justify-content: space-around; 意思是剩余空间在元素的左右两边。最后一行元素会存在对齐的问题，如果最后一行只有一个元素或两个，元素会居中；如下图：

解决方案：margin-right: 某个数值

分两种情况：最后一行只有一个元素；最后一行有两个元素。

情况一：最后一行只有一个元素即：nth-child(3n+1)

.wrap div:last-child:nth-child(3n+1)
{    
    margin-right: 66.67%;    color: blue;
}

为什么是 66.67%呢？

每个小块宽度是 30%，然后每个小块左右两边会有 10/6 的间隙。那么4号元素距离右边应该是： 30*2 + 4*(10/6) = 66.67

情况二：最后一行有两个元素，最后一个元素是：nth-child(3n+2)

.wrap div:last-child:nth-child(3n+2) 
{    
   margin-right: 33.33%;    
   color: yellow;
}

为什么是 33.33% 呢？

每个小块宽度是 30%，然后每个小块左右两边会有 10/6 的间隙。那么5号元素距离右边应该是： 30*1 + 2*(10/6) = 33.33

注意：

1. 本文介绍的是flex 中 justify-content: space-around;的情况，对于justify-content: space-between; 可以参考：www.jb51.net/css/708614.…
2. 对于一行有4个元素可以以此类推。