如何解決space-evenly的兼容性問題?

talk is cheap, 先上代碼(less語法)

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

space-evenly的作用是將每個元素的間隔相等, 但是兼容性較差,尤其是IOS,這種trick很好的解決了兼容性問題.

原理很好理解,假設有5個元素, space-evenly是將每個剩余空間平均分割,這樣就有6個相同寬度的間隔空間,間隔空間數(shù)量 = n + 1;
space-between是將最左邊和最右邊的元素分別占據(jù)最左邊和最右邊的空間,然后剩余空間平均分割,這樣就有4個相同寬度的間隔空間, 間隔空間數(shù)量 = n -1;
利用這種偽元素方式,在第一個元素前面和最后一個元素后面分別加上一個不占據(jù)空間的元素,這樣就是5+2=7個元素, 相同寬度間隔空間數(shù)量為6,因為左右兩邊的元素不占據(jù)空間,所以,變相的實現(xiàn)了space-evenly的效果.

I believe your apartment is on fire