CSS3.0盒模型display:-webkit-box;的使用

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

的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(- moz)、opera(-0)、chrome/safari（-webkit)。

一、box-flex属性 box-flex主要让子容器针对父容器的宽度按一定规则进行划分

HTML代码：

<article>
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代码：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:2;
    -webkit-box-flex:2;
    box-flex:2;
}
.sectionThree{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
    background:green;
}

展示效果：

说明： 必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素

，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center); 分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1，也就是说这三个子容器将父容器wrap的宽度

600px分为6份，sectionOne占居父结构宽度的3/6即300px，sectionOne占居父结构宽度的2/6即200px，sectionThree占居

父结构宽度的1/6即100px。

在以上代码的基础上给sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度又如何进行分配划分

的那？接着看

CSS代码

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
        margin:0px 50px;//添加margin属性
}
.sectionThree{
    width:200px;
    background:green;
}

展示效果

如果父容器选择vertical或block-axis属性对子容器进行垂直排列，其是对父容器的高度进行分配划分。此时如果父容器

定义了宽度值，其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度

值的子容器的宽度。 HTML代码：

<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代码：

.wrap{
 width:600px;
 height:200px;
 display:-moz-box;
 display:-webkit-box;
 display:box;
 -moz-box-orient:vertical;
 -webkit-box-orient:vertical;
 box-orient:vertical;//垂直排列
}
.sectionOne{
 background:orange;
 -moz-box-flex:1;
 -webkit-box-flex:1;
 box-flex:1;
}
.sectionTwo{
 background:purple;
 -moz-box-flex:2;
 -webkit-box-flex:2;
 box-flex:2;
}
.sectionThree{
 height:100px;
 background:green;
}

展示效果：

box-align

box-align表示父容器里面子容器的垂直对齐方式，可选参数如下所示：

start | end | center | baseline | stretch

HTML代码：

<article class="wrap">
 <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代码：

.wrap{
 width:600px;
 height:108px;
 display:-moz-box;
 display:-webkit-box;
 display:box;
 -moz-box-align:stretch;
 -webkit-box-align:stretch;
 -o-box-align:stretch;
 box-align:stretch;
}
.wrap section{
 height:80px;
}
.wrap .sectionOne{
 background:orange;
 -moz-box-flex:1;
 -webkit-box-flex:1;
 box-flex:1;
}
.wrap .sectionTwo{
 background:purple;
 -moz-box-flex:2;
 -webkit-box-flex:2;
 box-flex:2;
 height:108px;
}
.wrap .sectionThree{
 width:100px;
 background:green;
}

start

在box-align表示居顶对齐，如下图所示

end

在box-align表示居底对齐，如下图所示

center

在box-align表示居中对齐，如下图所示

stretch

在box-align表示拉伸，拉伸到与父容器等高

box-pack

box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：

start | end | center | justify

HTML代码：

<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代码：

.wrap{
 width:600px;
 height:108px;
 border:1px solid red;
 display:-moz-box;
 display:-webkit-box;
 display:box;
 -moz-box-pack:end;
 -webkit-box-pack:end;
 -o-box-pack:end;
 box-pack:end;
}
.wrap section{
 width:100px;
}
.wrap .sectionOne{
 background:orange;
}
.wrap .sectionTwo{
 background:purple;
}
.wrap .sectionThree{
 background:green;
}

start

在box-pack表示水平居左对齐，如下图所示

end

在box-pack表示水平居右对齐，如下图所示

center

在box-pack表示水平居中对齐，如下图所示

justify

在box-pack表示水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）