首页 > 代码库 > flexBox布局

flexBox布局

 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 }

flexBox布局