码迷,mamicode.com
首页 > 其他好文 > 详细

flexBox布局

时间:2016-09-07 19:00:30      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

 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布局

标签:

原文地址:http://www.cnblogs.com/zhanghuiyun/p/5850371.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!