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 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 }