css3 属性 flex 兼容 ios

一、解决
  盒子写法:

    display:-webkit-flex;      /* 新版本语法: Chrome 21+ */

  display:flex;                  /* 新版本语法: Opera 12.1, Firefox 22+ */

  display:-webkit-box;    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

  display:-moz-box;      /* 老版本语法: Firefox (buggy) */

  display:-ms-flexbox;  /* 混合版本语法: IE 10 */

  子元素写法

  -webkit-flex:1;        /* Chrome */

  -ms-flex:1;              /* IE 10 */

  flex:1;                     /* NEW, Spec - Opera 12.1, Firefox 20+ *

  /-webkit-box-flex:1  /* OLD - iOS 6-, Safari 3.1-6 */

  -moz-box-flex:1;      /* OLD - Firefox 19- */

二、例子
  新版:
  display: flex;
  justify-content: space-between;
  align-items: center;
  旧版:
  display: -webkit-box;
  display: -webkit-flex;
  -webkit-box-pack: justify;
  -webkit-box-align: center;
  -webkit-justify-content: space-between;
 
 
 
  




posted @ 2018-08-27 10:05  梦回秦殇  阅读(2220)  评论(0编辑  收藏  举报