CSS3中webkit-box布局页面实例_html/css_WEB-ITnose

之前布局都是用float布局或者是display:inline-block;+width:**%；来计算，所以都不是真正意义上的流布局；

接下来的实例能完整的教给大家如何建立CSS3当中的流布局（以chrome为例）

三列自适应布局    

       

 

 

 .wrap {

  display: -webkit-box;

  -webkit-box-orient: horizontal;

 }

 .child {

  min-height: 200px;

  border: 2px solid #666;

  -webkit-box-flex: 1;

  margin: 10px;

  font-size: 100px;

  font-weight: bold;

  font-family: Georgia;

  -webkit-box-align: center;

 }

 

 

 

1

 

2

 

3

 

如图：

三列布局，一列定宽，其余两列按1：2的比例自适应

 

 

 .wrap {

  display: -webkit-box;

  -webkit-box-orient: horizontal;

 }

 .child {

  min-height: 200px;

  border: 2px solid #666;

  margin: 10px;

  font-size: 40px;

  font-weight: bold;

  font-family: Georgia;

  -webkit-box-align: center;

 }

 .w200 {width: 200px}

 .flex1 {-webkit-box-flex: 1}

 .flex2 {-webkit-box-flex: 2}

 

 

 

200px

 

比例1

 

比例2

 

如图：

一个常见的web page 的基本布局

 

 

 header, footer,section {

 border: 10px solid #333;

 font-family: Georgia;

 font-size: 40px;

 text-align: center;

 margin: 10px;

 -webkit-box-flex:1;

 }

 #doc {

 height: 100%;

 display: -webkit-box;

 -webkit-box-orient: vertical;

 margin: 0 auto;

 }

 header,footer {

 min-height: 100px;

 -webkit-box-flex: 1;

 }

 #content {

 min-height: 400px;

 display: -webkit-box;

 -webkit-box-orient: horizontal;

 }

 .w200 {width: 200px}

 .flex1 {-webkit-box-flex: 1}

 .flex2 {-webkit-box-flex: 2}

 .flex3 {-webkit-box-flex: 3}

 

 

 

Header

 

   

定宽200

   

比例3

   

比例1

 

 

Footer

 

如图：