[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; }