flex布局 - justify-content: space-evenly

justify-content: space-evenly可以使每个元素之间和元素距离边距的距离都相等，但是兼容性比较差（iphone的SE上不支持，会失效，相当于没有设置），space-evenly将剩余空间平均分割，例如有5个元素，这样就有6个相同宽度的间隔空间，间隔空间的数量等于元素的数量加一。

有5个元素，justify-content: space-between最左边和和最右边的元素分别占据最左边和最右边的空间，然后剩余空间平均分割，这样就有4个相同宽度的间隔空间，间隔空间的数量等于元素数量减一。

justify-content: space-between可以利用伪元素方式，在第一个元素的前边和最后一个元素的后边分别加上一个不占空间的元素，这样就是7个元素，相同宽度的间隔空间数量为6，因为左右两边元素不占空间，所以实现了space-evenly的效果。

container{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
       //justify-content: space-evenly;
      &:before,
      &:after {
          content: '';
          display: block;
    }
}

原文：https://www.jianshu.com/p/bbd114834c59