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