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

}

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读