css3的盒模型

盒模型的几个属性

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

box-flex :兄弟元素之间的比例，作为一个系数比

box-flex-group :以组为单位的流体系数

box-direction:box方向

box-align:排列方式

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

 

1、三列自适应布局

<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>