[HTML/CSS]Flex布局中space-evenly的兼容性

屬性介紹

　　space-evenly: 均勻排列每個元素,每個元素之間的間隔相等

　　space-between: 均勻排列每個元素,首個元素放置於起點末尾元素放置於終點

 

思路

　　假設我們容器里面有3個元素

　　space-evenly: 容器剩余空間由4個間隙平分

　　space-between: 容器剩余空間由2個間隙平分

　　即，

　　如果我們在space-between的情況下添加兩個寬度為0的偽類(n-1+2)，那么就等於是在用space-evenly布局(n+1)

container{
      display: flex;
      justify-content: space-between;
       //justify-content: space-evenly;
}
container::before,
container::after{
    content: '';
    display: block;
}