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 }