CSS3中webkit-box的用法

Flexible Box Model（灵活盒子模型）

1.box-orient 在父元素上设置子元素排列 vertical（垂直） or horizontal（水平）

2.box-flex 在子元素上设置兄弟元素之间比例，仅做一个系数

3.box-align 在父元素上设置 box 排列

4.box-direction 在父元素上设置 box 方向可设置reverse排序相反

5.box-flex-group 在子元素上设置以组为单位的流体系数

6.box-ordinal-group 以组为单位的子元素排列方向

7.box-pack 在父元素上设置可设置center和vertically

display:-webkit-box;使用flexbox布局

-webkit-box-pack:center;实现容器内垂直居中

-webkit-box-align:center;实现容器内的内容水平居中

-webkit-box-orient:vertical;容器内的元素垂直排列

实例1：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <!--三列自适应布局，且有固定margin-->
 5     <meta charset="UTF-8">
 6     <title>Demo1</title>
 7     <style>
 8         .wrap{
 9             display: -webkit-box;
10             -webkit-box-orient:horizontal;
11         }
12         .child{
13             min-height:200px;
14             border:2px solid #666;
15             -webkit-box-flex:1;
16             margin:10px;
17             font-size:100px;
18             font-weight:bold;
19             font-family:Georgia;
20             -webkit-box-align:center;
21         }
22     </style>
23 </head>
24 <body>
25  <div class="wrap">
26      <div class="child">1</div>
27      <div class="child">2</div>
28      <div class="child">3</div>
29  </div>
30 </body>
31 </html>

实例2：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <!--当一列定宽，其余两列分配不同比例亦可（三列布局，一列定宽，其余两列按 1:2 的比例自适应）-->
 5     <meta charset="UTF-8">
 6     <title>Demo2</title>
 7     <style>
 8         .wrap{
 9             display: -webkit-box;
10             -webkit-box-orient:horizontal;
11         }
12         .child{
13             min-height:200px;
14             border:2px solid #666;
15             margin:10px;
16             font-size:40px;
17             font-weight:bold;
18             font-family:Georgia;
19             -webkit-box-align:center;
20         }
21         .w200{width:200px;}
22         .flex1{-webkit-box-flex:1}
23         .flex2{-webkit-box-flex:2}
24     </style>
25 </head>
26 <body>
27   <div class="wrap">
28       <div class="child w200">200px</div>
29       <div class="child flex1">比例1</div>
30       <div class="child flex2">比例2</div>
31   </div>
32 </body>
33 </html>

实例3：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <!--下面是一个常见的 web page 的基本布局-->
 5     <meta charset="UTF-8">
 6     <title>Demo3</title>
 7     <style>
 8         header,footer,section{
 9             border:10px solid #333;
10             font-family:Georgia;
11             font-size:40px;
12             text-align:center;
13             margin:10px;
14         }
15         #doc{
16             width:80%;
17             min-width:600px;
18             height:100%;
19             display: -webkit-box;
20             -webkit-box-orient: vertical;
21             margin:0 auto;
22         }
23         header,footer{
24             min-height:100px;
25             -webkit-box-flex:1;
26         }
27         #content{
28             min-height:400px;
29             display: -webkit-box;
30             -webkit-box-orient:horizontal;
31         }
32         .w200{width:200px;}
33         .flex1{-webkit-box-flex:1}
34         .flex2{-webkit-box-flex:2}
35         .flex3{-webkit-box-flex:3}
36     </style>
37 </head>
38 <body>
39      <div id="doc">
40          <header>Header</header>
41          <div id="content">
42              <section class="w200">定宽200</section>
43              <section class="flex1">比例1</section>
44              <section class="flex2">比例2</section>
45              <section class="flex3">比例3</section>
46          </div>
47          <footer>Footer</footer>
48      </div>
49 </body>
50 </html>

其中box-flex属性是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。

经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但用它们的私有属性定义firefox(-moz)、opera(-O)、chrome/safari(-webkit)

posted on 2016-09-28 11:18 程序媛Kasey 阅读(508) 评论(0) 收藏举报