福特Flex论坛 >
2017年如何在移动端优雅的使用flex
回复

查看: 回复:8

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

\"收藏此主题\"

190614

 
 
注册:
2008-03-06
  • 0粉丝
  • 0精华
  • 877帖子
号外号外:专注于移动端的fullPage.js来啦!!!快点我查看

做过移动端的同学都知道移动端布局太难了,终端太多了,传统的布局方式已经力不从心,各种新的布局方式被发明

在flex之前,传统布局有流式布局(就是默认的方式),绝对定位布局,弹性布局(em),和浮动布局,其中浮动布局并不是为布局而设计的,使用起来略显繁琐

2009年,对前端来说是不平凡的一年,html5定稿,es5.1发布,flex应运而生,天生响应式,生而为布局,使用及其简单

但是理想很丰满,现实很骨感,flex三改其规范,浏览器实现不一,各种神坑,本文将总结2017年移动端使用flex的最佳实践和经验

兼容性

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




上图中红色箭头代表我们应该兼容的浏览器情况,在国内,UC和QQ浏览器的份额不容忽视,上图中的 1 2 3 其实代表flex的三版语法,flex有09年版语法,2011年版语法和标准语法;右上角带黄色小方块的代表需要添加-webkit-前缀

将上图总结一下,移动端需要的兼容情况如下:

再来看一下百度给出的移动设备的统计情况,区别是安卓和ios,可以发现现在需要兼容安卓4.1 ,IOS7 ,这里百度给出的数据,当然你应该根据自己产品的统计情况来确定兼容情况







总结一下本文各处的最佳实践,兼容性目标是安卓4.1 ,IOS7 ,UC和qq浏览器

属性对照

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

容器的属性

容器属性包括:
displayflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
项目的属性

项目属性包括:
orderflex-growflex-shrinkflex-basisflexalign-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; 
一定有同学说这也太麻烦了,有没有啥简单的方法呢?还真有,共有三种方法,感谢前辈

第一种,编辑器插件,有一个叫做autoprefix插件,sublime就可以安装,你只需写标准属性,然后按一下快捷键就能够自动填充前缀属性。这种方法用起来最简单,但这种方法后面会不太好维护,比如有一天不需要09版语法了怎么破???一个一个去改吧,o(╯□╰)o

第二种,预处理器mixin,如果你用过less或者sass的话,一定知道mixin,下面已less 2.x为例,sass大同小异

.display-flex(@display: flex) {
    
 
回复本楼

太平洋汽车全新推出“太平洋车友会”;来太平洋车友会,结识志同道合的车友了解详情>>

lrg@@@

 
 
注册:
2008-03-23
  • 0粉丝
  • 0精华
  • 727帖子
总结的真好!谢谢分享。
 
回复本楼

1qiche

 
 
注册:
2008-04-07
  • 0粉丝
  • 0精华
  • 386帖子
最近在移动端用flex,对国产手机自带的浏览器绝望了。有种回到ie时代的感觉
 
回复本楼

MG名爵人

 
 
注册:
2007-01-17
  • 0粉丝
  • 0精华
  • 702帖子
之前在做的项目用了flex属性,结果在iphone5上没效果,为了这一个手机型号,只能把项目里所有的flex都换成了其他css。。。
 
回复本楼

jilin416

 
 
注册:
2008-03-05
  • 0粉丝
  • 0精华
  • 869帖子
 
回复本楼

190614

 
 
注册:
2008-03-06
  • 0粉丝
  • 0精华
  • 877帖子
知乎编辑器不支持表格,也是醉了,只能用截图了,╯□╰
 
回复本楼

小皓远

 
 
注册:
2008-03-04
  • 0粉丝
  • 0精华
  • 510帖子
align-items和justify-content重复了
 
回复本楼

shotyoudown

 
 
注册:
2008-03-06
  • 0粉丝
  • 0精华
  • 716帖子
但是一些奇葩手机的,奇葩浏览器还是不支持啊
 
回复本楼

小文与小希

 
 
注册:
2008-03-17
  • 0粉丝
  • 0精华
  • 630帖子
讲了半天就是一个postcss-loader插件啊
 
回复本楼
未登录用户

只可添加一张图片,多张图片请选高级模式

高级模式
精彩评论将会增加您在社区的影响力,恶意灌水用户将面临锁号处理。希望广大车友共同维护论坛的友好回复氛围。
常用表情
您可能感兴趣

支付宝扫码询价
领最高888元现金红包

关闭