flex(兼容写法)

Posted on 2017-01-07 12:02  Zhaoxy  阅读(536)  评论(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 }