css 弹性盒兼容性写法,直接复制粘贴

  固然也看到过碰到flexbox计划的属性将一切的新的老的前缀都加上的,如许省事啊 谁闲着没事成天研究那几个属性的兼容,更可况前端开展这么快说不定有更牛逼的样式出现

  然则想在移动端用好这个计划摸透这个属性 我照样一个个都寻找下吧,在此先说下各浏览器PC端最新版本状况今朝:IE最新版本是ie11, FF最新版本是ff41.0, Chrome最新版本是chrome45.0, Safira最新版本8.0.3, opera最新版本是31 然则这些最新版本对我们来讲并没甚么卵用 只是个规范 没有谁电脑装的都是最新版浏览器,好吧 看下各个属性兼容

  display:box/flexbox/flex 先看这个定义弹性计划盒子 附上兼容图

  

  照样比拟直不美观对此属性做兼容只需以下

  定义子元素摆设

  今朝有两种新的写法flex-direction和旧的写法box-orient+box-direction,

  新写法flex-direction的兼容

  

  旧写法box-orient和box-direction兼容一样的

  

  可以看出,ie11下版本照样不支撑标的目标这属性,其他浏览器要加前缀,所以当要定义标的目标时这个兼容可以写成

  用box-orient:horizontal + box-direction:normal/reverse可以到达flex-direction:row/row-reverse后果

  用box-orient:vertical + box-direction:normal/reverse可以到达flex-direction:column/column-reverse后果

  定义子元素换行状况

  新写法flex-wrap 兼容以下

  

  旧写法box-lines:single/multiple 默许single 兼容以下

  

  ie11下照样不支撑此属性,下面firefox不支撑但在25版本后是支撑的,照样要用flex加-moz, 比拟直不美观所以定义子元素换行时 可以以下写法

  flex-flow

  这个是下面两个属性的合写

  flex-flow兼容

  

  为了兼容到旧的浏览器就需求用到box-orient+box-lines合营 故兼容可以以下写

  横向摆设计划

  新版本justify-content的兼容状况