首页 > 其他分享> 文章详细

flex布局之space-evenly兼容性不好，巧用space-between实现space-evenly效果

2021-09-08 23:33:27 阅读：187 来源： 互联网

标签：flex space 元素 father 空白 between evenly

熟悉移动布局的程序猿都知道在弹性布局（flexbox）和网格布局（grid）中，都有一个属性justify-content，space-evenly是其值之一。目的是实现如下效果：

这是什么效果呢？？？

子元素均分容器空间，这是space-between和space-around均无法直接实现的效果。

的确很强大！！！但是我们通过can i use 网站查询，发现space-evenly的兼容性并不好，像ios的safari，10.3以前版本彻底不支持，10.3开始grid布局支持，但是flexbox布局不支持。

所以我们使用space-evenly要特别小心，应确保浏览器的支持，否则无法达到你想要的效果。

能不能用其他的方式实现space-evenly的效果呢？

答案是肯定的，我们可以使用space-between来模拟实现，而在can i use中的查询，我们发现，space-between的兼容性要好的多，如下图：

我们可以和上面的space-evenly进行比较，看看浏览器的支持是不是好多了。

但是有经验的程序猿都知道，space-between在子元素的最前和最后是不留空白的，如下图：

那么我们怎么样才能在最前和最后留同样大小的空白呢？有的人会想到space-around，但space-around在最前和最后留的空白是中间空白大小的一半，所以不行的。

但是我们知道space-between在各个子元素中间留的空白大小是相同的，第一个和最后一个元素紧贴两侧，这是space-between的工作原理，根据这个原理，我们可以在容器的最前和最后利用伪元素添加宽度为0的元素，这样是不是就相当于在第一个和第五个元素两侧加了同样大小的空白了。

我们看一下代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FLex Test</title>
</head>
<style>
    body {
        margin: 0 auto;
        max-width: 960px;
        min-width: 320px;
    }

    .father {
        display: flex;
        height: 400px;
        background: pink;
        margin-top: 10px;
        flex-flow: row wrap;
        justify-content: space-between;

    }

    .father div {
        width: 200px;
        height: 200px;
        background: skyblue;
        /* margin-right: 5px; */
    }

    .father::before,
    .father::after {
        content: '';
        display: block;
    }
</style>

<body>
    <div class="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <!-- <div class="son">5</div> -->
    </div>
</body>

</html>

————————————————
版权声明：本文为CSDN博主「一起学习前端吧」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sweetsoft/article/details/113817572

标签：flex,space,元素,father,空白,between,evenly
来源： https://www.cnblogs.com/JeffreyZhu/p/15245081.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

flex布局之space-evenly兼容性不好，巧用space-between实现space-evenly效果