2017年如何在移动端优雅的使用flex

2024-04-06 13:12:47

兼容性

2017年9月份，现在来看下flex的兼容性，可以发现绝大部分都是绿色

上图中红色箭头代表我们应该兼容的浏览器情况，在国内，UC和QQ浏览器的份额不容忽视，上图中的 1 2 3 其实代表flex的三版语法，flex有09年版语法，11年版语法和标准语法；右上角带黄色小方块的代表需要添加-webkit-前缀
将上图总结一下，移动端需要的兼容情况如下：

再来看一下百度给出的移动设备的统计情况，分别是安卓和ios，可以发现现在需要兼容安卓4.1+，IOS7+，这里百度给出的数据，我们可以根据自己产品的统计情况来确定兼容情况
兼容性目标是安卓4.1+，IOS7+，UC和qq浏览器

属性对照

通过上面的目标和caniuse，很容易得出 我们需要写09和标准两版语法，只有在两版语法中都存在属性才能使用，下面给出两版语法的对照关系，注意这不是语法指南，语法指南请看结尾处的推荐资料

容器的属性

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

项目的属性

项目属性包括：
order
flex-grow
flex-shrink
flex-basis
flex
align-self

采坑经验

一般来说只要09版语法有对应功能，就可以使用了，但是移动端还有一些坑，导致某些属性不能用justify-content: space-around 不能用，旧版语法没有，但是可以用space-between+容器的padding模拟flex-wrap: wrap 不能用，对应的旧版语法 box-lines: mutiple 大部分浏览器不支持，也就是说不能折行uc span行内元素作为子项时 display 必须设置为block，最好直接使用块级元素

说了这么多下面给一份标准的写法，一个flex属性应该这么写

webkit前缀09版
webkit前缀标准版
标准版

举个例子，display: flex要这么写

display: -webkit-box;
display: -webkit-flex;
display: flex;

作者：颜海镜
链接：https://zhuanlan.zhihu.com/p/29637639
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

转载于:https://www.cnblogs.com/changlon/p/7599377.html

2017年如何在移动端优雅的使用flex相关推荐

if else switch case 如何高端优雅又不失礼貌的的写判断
日常项目开发我们必然且高频会遇到判断场景比如: 一个管理系统,根据用户特征每人发放福利 1,瘸子 === 送 === 轮椅 2,瞎子 === 送 === 墨镜 3,聋子 === 送 === 耳机(程 ...
高端优雅简历模板打包下载（附找工作指南）
简历怎么写简历要真实,突出重点,主次分明一目了然,核心内容主要包含求职意向.工作实习经历.个人信息.教育背景.奖励情况等.求职意向是简历的中心,要求唯一.明确,切中要点,切忌模棱两可与空泛.工作经历 ...
05移动端布局基础之flex弹性布局项目实战(携程移动端首页)
技术交流QQ群:1027579432,欢迎你的加入! 1.携程网移动端首页打开网址:m.ctrip.com 2.技术选型方案:采取单独制作移动页面方案技术:布局采取flex布局 3.搭建相关文件 ...
搭建移动端布局框架:整合flex
0x001 概述 flex在移pc端的兼容并不是很好,但是在移动端的支持却是很好,而且flex布局对移动端布局来说简直就是福音.但是没有经过整和处理,用flex布局也算是艰难,所以打算搭建一套基于fl ...
进阶高端，2017年vivo手机用实力说话
从3月到11月,vivo在2016年一共发布了8款产品.正是凭借这8款产品在市场上的出色表现,vivo在2016获得了较2015年出货量增幅100%的骄人战绩,总出货量达8000万台.成为国产手机的绝 ...
2017浪擎灾备Insight高端论坛盛大闭幕
9月21日,由上海浪擎信息科技有限公司主办的"预·见未来--2017浪擎灾备Insight高端论坛" 盛大闭幕.在上午的论坛上,国内首个数据安全国产创新联盟在上海正式成立,由中国科 ...
想避免重复请求/并发请求？这样处理才足够优雅
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料!对于一些用户请求,在某些情况下是可能重复发送的,如果是查询类 ...
优雅地处理重复请求（并发请求）——附Java实现
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源:jaskey.github.io/blog/2020 ...
优雅地处理重复请求（并发请求）
文章来源:https://sourl.cn/9ukjTx 目录利用唯一请求编号去重业务参数去重计算请求参数的摘要作为参数标识继续优化,考虑剔除部分时间因子请求去重工具类,Java实现总结 ...

最新文章

热门文章