关于盒模型-webkit-box流式布局

新的工作需要适配移动端，以往的float、block布局会非常麻烦且问题不断，所以尝试下-webkit-box布局。

-webkit-box是css3新添加的盒子模型属性，有人称之为弹性盒模型，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分等分布方式以及如何处理可用的空间。使该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome（-webkit）。

用于父元素的样式：
display: box; 该属性会将此元素及其直系子代加入弹性框模型中。（Flexbox 模型只适用于直系子代）
box-orient: horizontal | vertical | inherit; 该属性定义父元素的子元素是如何排列的。
box-pack: start | end | center | justify; 设置沿 box-orient 轴的父元素中子元素的排列方式。因此，如果 box-orient 是水平方向，则父元素的子元素是水平的排列方式，反之亦然。（表示父容器里面子容器的水平对齐方式–垂直排列时–定宽）
box-align: start | end | center | baseline | stretch; 基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排列，反之亦然。（表示父容器里面子容器的垂直对齐方式–水平排列时–定高）
用于子元素的样式：
box－flex: 0 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。

示例一：板块水平分布：

代码如下：

.parent{
width:80%;
height:200px;
border:1px solid red;
display:-webkit-box;
-webkit-box-orient:horizontal;/可写可不写，默认属性值horizontal子元素水平分布/
}
.parent div{
border-right:1px solid #000;
}

<div style="width:100%;min-height:500px;border:1px solid #000;display:-webkit-box;-webkit-box-align:center; -webkit-box-pack:center;">
    <div class="parent">
        <div class="div1"><h1>这是div1</h1></div>
        <div class="div2"><h1>这是div2</h1></div>
        <div class="div3"><h1>这是div3</h1></div>
    </div>
</div>

示例二：板块内容垂直水平居中：

代码如下：

.parent{
width:80%;
height:200px;
border:1px solid red;
display:-webkit-box;
-webkit-box-orient:horizontal;/可写可不写，默认属性值horizontal子元素水平分布/
-webkit-box-align:center;
-webkit-box-pack:center;
}
.parent div{
border-right:1px solid #000;
color:#fff;
}
.parent div:nth-child(1){
background: #000000;
}
.parent div:nth-child(2){
background:#c03b25;
}
.parent div:nth-child(3){
background:#2C8DFB;
}

示例三：板块分布比例
（分别按1:2:3排列，-box-flex:后的数字，可随意写定）

代码如下：

.parent{
width:80%;
height:200px;
border:1px solid red;
display:-webkit-box;
-webkit-box-orient:horizontal;/可写可不写，默认属性值horizontal子元素水平分布/
-webkit-box-align:center;
-webkit-box-pack:center;
}
.parent div{
border-right:1px solid #000;
color:#fff;
}
.parent div:nth-child(1){
background: #000000;
-webkit-box-flex:1;
}
.parent div:nth-child(2){
background:#c03b25;
-webkit-box-flex:2;
}
.parent div:nth-child(3){
background:#2C8DFB;
-webkit-box-flex:3;
}

示例四：板块垂直排列；
（与水平分布一模一样，只是更改了-box-orient为vertical）

代码如下：

.parent{
width:80%;
height:400px;
border:1px solid red;
display:-webkit-box;
-webkit-box-orient:vertical;/可写可不写，默认属性值horizontal子元素水平分布/
-webkit-box-align:center;
-webkit-box-pack:center;
}
.parent div{
border-right:1px solid #000;
color:#fff;
}
.parent div:nth-child(1){
background: #000000;
-webkit-box-flex:1;
}
.parent div:nth-child(2){
background:#c03b25;
-webkit-box-flex:2;
}
.parent div:nth-child(3){
background:#2C8DFB;
-webkit-box-flex:3;
}