flexBox布局

Posted 2020-08-07 zhanghuiyun

 1 //中间留空，两侧靠边，多行显示，每行3个，一个li的宽度是30%，最后一行，如果是两个的时候会出现异常布局，可以对最后一行的最后一个li进行right:35%
 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 }