解决flex布局的space-evenly兼容性问题

直接上代码：

container{display: flex;flex-flow: row nowrap;align-items: center;justify-content: space-between;//justify-content: space-evenly;&:before,&:after {content: '';display: block;}
}

space-evenly的作用是将每个元素的间隔相等, 但是兼容性较差,尤其是IOS,这种trick很好的解决了兼容性问题

原理很好理解,假设有5个元素, space-evenly是将每个剩余空间平均分割,这样就有6个相同宽度的间隔空间,间隔空间数量 = n + 1;
space-between是将最左边和最右边的元素分别占据最左边和最右边的空间,然后剩余空间平均分割,这样就有4个相同宽度的间隔空间, 间隔空间数量 = n -1;
利用这种伪元素方式,在第一个元素前面和最后一个元素后面分别加上一个不占据空间的元素,这样就是5+2=7个元素, 相同宽度间隔空间数量为6,因为左右两边的元素不占据空间,所以,变相的实现了space-evenly的效果.

学习来源：https://www.jianshu.com/p/bbd114834c59

转载于:https://www.cnblogs.com/chao202426/p/11457968.html

解决flex布局的space-evenly兼容性问题相关推荐

微信小程序解决flex布局，最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐实际效果与代码如下: wxml <view class="con- ...
解决flex布局导致图片变形
现象最近使用dva写页面,里面使用了flex布局,结果图片被纵向拉伸变形了. 2017-11-21更新: 终于再次出现这个问题了,截图纪念一下: 解决方案: 1.在父元素没有设置高度的情况下,可以设 ...
解决 flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行的问题
这两天写了一个页面发现 flex布局自动换行属性导致上下两行div中间有空行,下面先说现象. 这是中间有空行的现象导致整个页面看起来很难受 ... 通过加了一个属性 align-content ...
解决flex布局space-between最后一行布局问题超简单方法
如果flex布局中justify-content设置为space-between.space-evenly或者space-around 并且最后一行与上面一行个数不同时,布局会裂开 1个contain ...
解决flex布局 space-between最后一行两边分布的问题
1.情况一:3列最后一行显示一个.两个.或者三个 /* 只需给包裹这所有项的容器一个伪元素即可 */ .boxContainer:after{content:'';width:33.33%; } 2 ...
flex布局，弹性盒子，css使用及理解
flex布局以下内容主要分为四个部分: 常见概念 flex容器相关属性 flex元素相关属性 flex布局的应用 flex布局的兼容性处理 flex布局的相关概念弹性盒模型弹性盒模型(Flexi ...
CSS 之 Flex布局
CSS 之 Flex布局文章目录 CSS 之 Flex布局 1.Flex布局 vs 网格布局 (1D vs 2D) 2.Flex属性 1)flex-direction属性 & 排列方向 2) ...
flex 布局的浏览器兼容性方案
前言 flex 布局在目前前端开发中使用到的概率还是蛮大的,尽管它从诞生到现在已经经历了 N 年了,但是从个人的工作圈子来看,有很多人其实对 flex 布局的理解还是很表面,比如一味地使用 flex: ...
html子布局不超出父布局,详解flex布局中保持内容不超出容器的解决办法
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题. 就是在一个设置了 flex:1 的容器中,如果文字很长, ...
android按钮在容器下方,使用flex布局解决安卓手机上固定在底部的按钮，在键盘弹起后挡住input输入框的问题...
移动端经常会出现,一个表单里面,确定按钮固定在底部这样的布局,一般会让按钮absolute或者fixed,这样在ios上没有问题,但是在安卓手机上,当表单里面的input输入框获得焦点的时候,按钮会挡 ...

解决flex布局的space-evenly兼容性问题

space-evenly的作用是将每个元素的间隔相等, 但是兼容性较差,尤其是IOS,这种trick很好的解决了兼容性问题

解决flex布局的space-evenly兼容性问题相关推荐

最新文章

热门文章