首页 > 其他 > 详细

flex(兼容写法)

时间:2017-01-07 13:06:22      阅读:239      评论:0      收藏:0      [点我收藏+]

CSS样式

  • flex:定义布局为盒模型
  • flex-v:盒模型垂直布局
  • flex-1:子元素占据剩余的空间
  • flex-align-center:子元素垂直居中
  • flex-pack-center:子元素水平居中
  • flex-pack-justify:子元素两端对齐
 1 .flex {
 2     display: -webkit-box;
 3     display: -webkit-flex;
 4     display: -ms-flexbox;
 5     display: flex;
 6 }
 7 
 8 .flex-v {
 9     -webkit-box-orient: vertical;
10     -webkit-flex-direction: column;
11     -ms-flex-direction: column;
12     flex-direction: column;
13 }
14 
15 .flex-1 {
16     -webkit-box-flex: 1;
17     -webkit-flex: 1;
18     -ms-flex: 1;
19     flex: 1;
20 }
21 
22 .flex-align-center {
23     -webkit-box-align: center;
24     -webkit-align-items: center;
25     -ms-flex-align: center;
26     align-items: center;
27 }
28 
29 .flex-pack-center {
30     -webkit-box-pack: center;
31     -webkit-justify-content: center;
32     -ms-flex-pack: center;
33     justify-content: center;
34 }
35 
36 .flex-pack-justify {
37     -webkit-box-pack: justify;
38     -webkit-justify-content: space-between;
39     -ms-flex-pack: justify;
40     justify-content: space-between;
41 }

 

flex(兼容写法)

原文:http://www.cnblogs.com/YuArtian/p/6259028.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!