flexBox布局 -- 兼容性

 1 //中间留空,两侧靠边,多行显示,每行3个,一个li的宽度是30%,最后一行,如果是两个的时候会出现异常布局,可以对最后一行的最后一个li进行right:35%,android4.4以上才支持,
所以说还需要通过混合box布局,但,如果需要多行显示,则android中不能实现,lines属性不支持,但在android4.2版本中,如果使用微信或者浏览器也还是可以的
2 .title ul{ 3 list-style-type: none; 4 position: relative; 5 overflow: hidden; 6 height: 48px//中间留空,两侧靠边 7 display : -webkit-flex; 8 -webkit-flex-direction : -webkit-row; 9 -webkit-flex-wrap : wrap; 10 -webkit-justify-content : space-between; 11 -webkit-align-item : -webkit-stretch; 12 display : -moz-flex; 13 -moz-flex-direction : -moz-row; 14 -moz-flex-wrap : wrap; 15 -moz-justify-content : space-between; 16 -moz-align-item : -moz-stretch; 17 display : -ms-flex; 18 -ms-flex-direction : -ms-row; 19 -ms-flex-wrap : wrap; 20 -ms-justify-content : space-between; 21 -ms-align-item : -ms-stretch; 22 display : -o-flex; 23 -o-flex-direction : -o-row; 24 -o-flex-wrap : wrap; 25 -o-justify-content : space-between; 26 -o-align-item : -o-stretch; 27 display : flex; 28 flex-direction : row; 29 flex-wrap : wrap; 30 justify-content : space-between; 31 align-item : stretch;; 32 margin: 8px 0 0px 0; 33 }

//可以使用另一种方式进行布局,3列多行布局
 1 .am-smallContainer ul li{
 2     width: 30%;
 3     text-align: center;
 4     border: 1px solid #ccc;
 5     height: 80px;
 6     margin: 8px 0;
 7     position: relative;
 8     border-radius: 2px;
 9     float: left;
10     margin-right: 4.5%;
11 }
12 .am-smallContainer ul li:nth-child(3n){
13     margin-right: 0;
14 }
15 .am-smallContainer ul li:first-child{
16     margin-right: 4.5%;
17 }

 

 

posted @ 2016-09-07 17:54  ^^-^^-  阅读(325)  评论(0编辑  收藏  举报