css3的盒模型

盒模型的幾個屬性

box-orient:子元素排列的方式        vertical or horizontal 

box-flex :兄弟元素之間的比例，做爲一個係數比

box-flex-group :以組爲單位的流體系數

box-direction:box方向

box-align:排列方式

box-ordinal-group 以組爲單位的子元素排列方向

 

一、三列自適應佈局

<style>

.wrap{

display:-webkit-box;

-webket-box-orient:horizontal;

}

.child{

min-height:200px;

border:1px sold gray;

-webkit-box-flex:1;

margin:10px;

-webkit-box-align:center;

}

.w200 {
width: 200px;
min-height: 200px;
border: 2px solid #666;
margin: 10px;
}

.flex1 {
min-height: 200px;
border: 2px solid #666;
-webkit-box-flex: 1;
margin: 10px;
}

.flex2 {
min-height: 200px;
border: 2px solid #666;
-webkit-box-flex: 2;/*表示一個比例*/
margin: 10px;
}

</style>

<div class="wrap">

<div class="child"></div><div class="child"></div><div class="child"></div>

</div>

 

2.當一列定寬，其他兩列分配不一樣

<div class="wrap">

<div class="w200"></div><div class="flex1"></div><div class="flex2"></div>

</div>