布局之space-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"><title>使用space-between模拟space-evenly的效果</title><style>.box{width: 400px;height: 200px;border:1px lightpink solid;display: flex;}.item{width: 40px;box-sizing: border-box;background: lightpink;border:1px solid purple;}/*下面的css在容器的最前和最后添加块元素，在flex布局中，子元素宽的大小默认为0*/.box::after,.box::before{content:"";display: block;}</style>
</head>
<body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div>
</body>
</html>

这样就可以实现我们要的效果了！！！！

布局之space-evenly兼容性问题相关推荐

[html] 请说说你在写布局时对于浏览器兼容性的感受或总结
[html] 请说说你在写布局时对于浏览器兼容性的感受或总结要選用某種方式,table,flex,float,定位來完成某一部分的佈局時,不要忘了是要跑在什麼瀏覽器以及設備上,比如定位在ios上是有 ...
css3 calc()自适应布局属性 ---浏览器版本兼容性的问题
"无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程." 我们想 ...
Flutter学习之”相对布局“
注:所有文章均不会详细讲解基础widget的使用,大家可以查看官方文档,如有使用问题可以在评论中提出.前期搭建环境工作还没准备好的小伙伴,可以在我的上一篇找官方文档链接,跟着官方文档就行了. 前言从 ...
flexbox布局_使用Flexbox制作十二列布局
flexbox布局演示地址 If there's one thing flexbox excels at, it's twelve-column layouts. In a twelve-colum ...
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
使用 CSS3 Flexible Boxes 布局
本博客同步自我的Github博客 Flexible Box是什么?Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型--伸缩盒模型.由CSS3规范提出,这是在原有的大家非常熟悉的 ...
css 书写记录（兼容性）
很早开始就知道css hack并使用之,以前觉得css hack是个很神奇的东西能解决很多兼容性问题,渐渐地发现,其实不容hack的页面才是更好的选择.从页面开始布局设计初就考虑到各个浏览器的问题,留 ...
html如何左侧固定div,详解左右宽度固定中间自适应html布局解决方案
原标题:详解左右宽度固定中间自适应html布局解决方案本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下: a.使用浮动布局 html结构如下 left right ce ...
CSS页面布局解决方案大全
前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环.在页面框架的搭建之中,又有居中布局.多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局. 居中布局水平居中 1)使用inli ...
HTML与CSS布局技巧总结
很多人对CSS的布局有困惑,实际的应用场景中由于布局种类多难以选择.今天我花些时间总结下自己对CSS布局的理解,分析下了解各种布局的优劣,同时希望能分享给初入前端的朋友们一些在布局上的经验,如果有那些 ...

布局之space-evenly兼容性问题

布局之space-evenly兼容性问题相关推荐

最新文章

热门文章