2018-05-03 20:50:24 Love_your_life 阅读数 1483
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5337 人正在学习 去看看 肖海鹏

今天做公司的医生端项目,别的手机显示的页面都没有问题,唯独测试手里的一台iphone显示的页面混乱;
系统是ios8.4版本,别的手机显示的页面都是正确的,8.4系统的手机不论在微信里,还是在浏览器中,显示都是乱的。
一开始怀疑是接口的问题,所以一顿骚操作,屏蔽了各种接口,结果并不见效。所以怀疑是页面样式的问题,然后谷歌搜索到了ios8对flex的兼容性问题,觉得应该就是它了。
然后针对性的,对css文件中的display:flex做了兼容处理。。果然,bug消灭,

display:flex;
//兼容处理之后

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

flex:1;
//兼容处理之后

-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;

具体原理我这里就不写了,网上可以搜索到,毕竟旧系统用的人也越来越少,以后相对应的兼容bug会越来越少的

2018-12-10 17:32:18 qq_39635302 阅读数 553
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5337 人正在学习 去看看 肖海鹏
开启弹性布局
display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ 


-webkit-flex: 1;        /* Chrome */  
flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1  ;   /* OLD - iOS 6-, Safari 3.1-6 */  

副轴变主轴
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
flex-direction:column;
-webkit-flex-direction:column;


-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-box-pack:justify;
2018-08-07 10:53:00 weixin_30242907 阅读数 17
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5337 人正在学习 去看看 肖海鹏

问题:

IOS8.2 dispaly:flex;不生效;

注意一下兼容写法的顺序问题, 

    1.  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    2.  display: -moz-box; /* Firefox 17- */
    3.  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    4.  display: -moz-flex; /* Firefox 18+ */
    5.  display: -ms-flexbox; /* IE 10 */
    6.  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

dispaly: -webkit-box与 display: flex一类flex属性值是不同版本的flexbox,

前者是09版本,后者是12版本,如果将-webkit-box写在webkit-flex后面 浏

览器就会调用就版本的flexbox规范

转载于:https://www.cnblogs.com/ralapgao/p/9435688.html

2018-03-29 15:53:05 qq_39364032 阅读数 1253
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5337 人正在学习 去看看 肖海鹏

一直以来用flex解决居中问题很方便,几个项目做下来,flex的兼容性问题也遇到了的,但最近的一个项目测试的时候,在一部ios8以下版本的iPhone上出现了不兼容。然后又就去研究了一下flex的兼容性,下面分享一下flex布局的兼容性写法。

.flex {

display: box; /* OLD - Android 4.4- */

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */

display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */

display: -ms-flexbox; /* TWEENER - IE 10 */

display: -webkit-flex; /* NEW - Chrome */

display: flex;

}

 
/* 父元素-水平居中(主轴是横向才生效) */

.flex-hc {

/* 09版 */

-webkit-box-pack: center;

/* 12版 */

-webkit-justify-content: center;

-moz-justify-content: center;

-ms-justify-content: center;

-o-justify-content: center;

justify-content: center;

/* 其它取值如下:

align-items 主轴原点方向对齐

flex-end 主轴延伸方向对齐

space-between 等间距排列,首尾不留白

space-around 等间距排列,首尾留白

*/

}

 
/* 父元素-竖直居中(主轴是横向才生效) */

.flex-vc {

/* 09版 */

-webkit-box-align: center;

/* 12版 */

-webkit-align-items: center;

-moz-align-items: center;

-ms-align-items: center;

-o-align-items: center;

align-items: center;

}

 
/* 子元素-平均分栏 */

.flex1 {

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

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

width: 20%; /* For old syntax, otherwise collapses. */

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

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

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

}


/* 父元素-横向排列(主轴) */

.flex-h {

display: box; /* OLD - Android 4.4- */

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */

display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */

display: -ms-flexbox; /* TWEENER - IE 10 */

display: -webkit-flex; /* NEW - Chrome */

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

/* 09版 */

-webkit-box-orient: horizontal;

/* 12版 */

-webkit-flex-direction: row;

-moz-flex-direction: row;

-ms-flex-direction: row;

-o-flex-direction: row;

flex-direction: row;

}

 

/* 父元素-横向换行 */

.flex-hw {

/* 09版 */

/*-webkit-box-lines: multiple;*/

/* 12版 */

-webkit-flex-wrap: wrap;

-moz-flex-wrap: wrap;

-ms-flex-wrap: wrap;

-o-flex-wrap: wrap;

flex-wrap: wrap;

}

 
/* 父元素-纵向排列(主轴) */

.flex-v {

display: box; /* OLD - Android 4.4- */

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */

display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */

display: -ms-flexbox; /* TWEENER - IE 10 */

display: -webkit-flex; /* NEW - Chrome */

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

/* 09版 */

-webkit-box-orient: vertical;

/* 12版 */

-webkit-flex-direction: column;

-moz-flex-direction: column;

-ms-flex-direction: column;

-o-flex-direction: column;

flex-direction: column;

}

 
/* 父元素-纵向换行 */

.flex-vw {

/* 09版 */

/*-webkit-box-lines: multiple;*/

/* 12版 */

-webkit-flex-wrap: wrap;

-moz-flex-wrap: wrap;

-ms-flex-wrap: wrap;

-o-flex-wrap: wrap;

flex-wrap: wrap;

}


/* 子元素-显示在从左向右(从上向下)第1个位置,用于改变源文档顺序显示 */

.flex-1 {

-webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */

-moz-box-ordinal-group: 1; /* OLD - Firefox 19- */

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

-webkit-order: 1; /* NEW - Chrome */

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

}


/* 子元素-显示在从左向右(从上向下)第2个位置,用于改变源文档顺序显示 */

.flex-2 {

-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */

-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */

-ms-flex-order: 2; /* TWEENER - IE 10 */

-webkit-order: 2; /* NEW - Chrome */

order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */

}

 

 

 

 

2019-04-04 16:27:52 zj25xy11 阅读数 29
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5337 人正在学习 去看看 肖海鹏
   display: flex;
   display: -webkit-flex; //适配低版本写法
   flex-direction: column;
   -webkit-flex-direction: column;//适配低版本写法
   flex:1;
   -webkit-box-flex: 1;
   -webkit-flex: 1;

转自:https://blog.csdn.net/u012982629/article/details/80422930

.ec-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex; }

.ec-item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1; }

转自:https://blog.csdn.net/DuanLiKang/article/details/77970656

Bootstrap4

阅读数 12

没有更多推荐了,返回首页