如何解決space-evenly的兼容性問(wèn)題?
talk is cheap, 先上代碼(less語(yǔ)法)
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的作用是將每個(gè)元素的間隔相等, 但是兼容性較差,尤其是IOS,這種trick很好的解決了兼容性問(wèn)題.
原理很好理解,假設(shè)有5個(gè)元素, space-evenly是將每個(gè)剩余空間平均分割,這樣就有6個(gè)相同寬度的間隔空間,間隔空間數(shù)量 = n + 1;
space-between是將最左邊和最右邊的元素分別占據(jù)最左邊和最右邊的空間,然后剩余空間平均分割,這樣就有4個(gè)相同寬度的間隔空間, 間隔空間數(shù)量 = n -1;
利用這種偽元素方式,在第一個(gè)元素前面和最后一個(gè)元素后面分別加上一個(gè)不占據(jù)空間的元素,這樣就是5+2=7個(gè)元素, 相同寬度間隔空間數(shù)量為6,因?yàn)樽笥覂蛇叺脑夭徽紦?jù)空間,所以,變相的實(shí)現(xiàn)了space-evenly的效果.
