CSS3_html/css_WEB-ITnose の Webkit-box レイアウト ページの例

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

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

三列自适应布局    

       

 

 

 

 

1

 

2

 

3

 

如图：

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

 

 

 

 

200px

 

比例1

 

比例2

 

のような図：

一常见的ウェブページの基本布局

<スタイル>

ヘッダー、フッター、セクション {

ボーダー: 10px ソリッド #333;

フォントファミリー: ジョージア;

font-size: 40px;

text-align: center;

マージン: 10px;

-webkit-box-flex:1;

}

#doc {

高さ: 100%;

表示: -webkit-box;

-webkit-box-orient: 垂直;

マージン: 0 自動;

}

ヘッダー、フッター {

最小高さ: 100px;

-webkit-box-flex: 1;

}

#content {

min-height: 400px;

表示: -webkit-box;

-webkit-box-orient: 水平;

}

.w200 {width: 200px}

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

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

.flex3 {-webkit-box-フレックス: 3}

ヘッダー

定宽200

比率 3

比率 1

フッター

のような图：