display:box；display:flex；弹性盒模型

display:box；display:flex；弹性盒模型

非常适用于移动端。PC端高级浏览器，效果也很好。

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
这是老版本的写法，09年之前的。这样给外面的父元素设置了这5个属性之后，这个div就是弹性盒子模型了。
里面的元素就可以自由分配空间了，在一行，而不需要浮动布局float了

而弹性伸缩盒的原理就是给父元素声明一个display:box伸缩盒属性后，就代表是把整个盒子里的块元素都变成了内联元素，然后这个父元素里面的子元素就可以自由分配空间了，而不会每个块元素各占一行，而是协商共同排在一行上面。可以这么理解。
比如下面例子
--------------html-----------------
<div class="box">
<p>123</p>
<p>123</p>
<p>123</p>
</div>
--------------css------------------
.box {
width: 330px;
height: 400px;
border: 1px #000 solid;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
}

.box p {
width: 100px;
height: 20px;
background: #000;
margin: 5px;
}
-----------------end-------------------
这div里面的3个p标签会在一行展示，而不是上下层级分配

2011年之后出现了display:flex;
1、首先，新版本设置伸缩盒的display属性如下：
display:flex;将容器盒模型作为块级弹性伸缩盒显示(新版本)
display:inline-flex;将容器盒模型作为内联级弹性伸缩盒显示(新版本)
例如：
div{
display:flex;
}
大部分新版浏览器基本都不用使用前缀了，目前应该只有苹果浏览器需要带webkit前缀，其他都可以正常显示。
box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为Flex布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。

二、弹性伸缩盒的属性
1、box-orient属性
box-orient主要实现盒子内部元素的流动方向。我们看看他们的属性值如下：
A、box-orient:horizontal;伸缩项目从左到右水平排列。默认值
B、box-orient:vertical;伸缩项目从上到下垂直排列。
C、box-orient:inline-axis;伸缩项目沿着内联轴排列显示。
D、box-orient:block-axis;伸缩项目沿着块轴排列显示。
一般我们就默认就行了。
2、box-direction属性
主要是设置伸缩容器中元素的流动顺序。
属性值：
box-direction:normal;默认值，正常顺序。
box-direction:reverse;逆向排列，也就是倒着排列的意思。
3、box-pack属性
用于伸缩项目的分布方式。
它的属性值如下：
box-pack:start;伸缩项目以起始点靠齐。
box-pack:end;伸缩项目以结束点靠齐。
box-pack:center;伸缩项目以中心点靠齐。
box-pack:justify;伸缩项目平均分布，也就是两边排列的意思。-webkit-支持，-moz-不支持。
不过你如果不给父元素div添加宽度为100%的话，是显示不出效果来的，因为div添加了display：box;属性后，这个div就不是普通盒子了，而是伸缩性盒子了，随里面内容伸缩。所以我们必须给他强制添加一个宽度，这样设置了box-pack排列属性才会有效果。比如：
div{
width:100%
-webkit-box-pack:end;
}
这样才会有效果的，也就是从结尾即从右侧向左侧排列的了。如果我们设置成center就变成居中了。
4、box-align属性
用来处理伸缩容器的额外空间。
有五个属性值：
box-align:start;伸缩项目以顶部为基准，清理下部分额外空间。
box-align:end;伸缩项目以底部为基准，清理上部分额外空间。
box-align:center;伸缩项目以中部为基准，平均清理上下部额外空间；
box-align:baseline;伸缩项目以基线为基准，清理额外的空间；
box-align:stretch;伸缩项目填充整个容器，是默认值。

例如：
div{
-webkit-box-align:center;
}
就是垂直居中对齐的意思，而清理上下额外空间就是p模块容器里的内容正好填满，不显示多余的空间。

综合网络很多资源，得以总结理解，多谢下面链接作者，仅此备份，便于自己理解。

参考链接：
http://blog.tianya.cn/post-5475416-98043238-1.shtml
http://www.ql2015.cn/web/divcss/425.html/2
http://www.ql2015.cn/web/divcss/425.html/3
http://www.tuicool.com/articles/UneAJju
http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/