display:box布局的详细介绍（图解）

使用display:-webkit-box布局很久了，但是每次使用的时候都是现用现查，而且发现网上没有找到一篇非常全面的关于此布局的介绍，今天决定写一篇博客来记录这个自适应布局。

1、首先不同的浏览器要做不同的兼容：目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari（-webkit)。

2、用于父元素的常用属性有以下三个：
> ① box-orient: horizontal | vertical | inherit; 该属性定义父元素的子元素是如何排列的。

horizontal：子元素水平排列，默认也是这个属性

vertical：子元素垂直排列，非常适合常用的网页布局，即头部，中间内容部分和底部，建议如果底部是固定定位的评论框，非常建议用此布局，可以减少很多浮动布局留下的坑。

> ②box-pack: start | end | center | justify; 该属性定义父元素的子元素是如何排列的。但是注意这种排列是沿box-orient方向的

>③ box-align: start | end | center | baseline | stretch; 也是沿着box-align方向的

2、用于子元素的常用属性有：box－flex: 0 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分
 

 

display:box属性
在移动端开发的时候，圣杯布局，弹性盒，是我们经常会用得到的，W3C很久以前就有一个display:box属性
flex是最新的，但是在实际的浏览器测试中，display: flex 不能完全替代display: -webkit-box
display: box 使用可以参考http://www.html5rocks.com/en/tutorials/flexbox/quick/ 
display: flex 使用可以参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
兼容性的问题可以参考https://css-tricks.com/old-flexbox-and-new-flexbox/ 
Android UC浏览器只支持display: box语法。而iOS UC浏览器则支持两种方式 
需要注意的是如果要使用line-clamp时需要用display:box
display:box
父元素设置该属性后，作用与display:flex类似，子元素可在一行显示，且实现自适应。
box-orient:horizontal/vertical
父元素设置该属性后，作用与flex-direction: column相似。使子元素排列方向发生变化。
horizontal  水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。
vertical      垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。
box-direction:normal/reverse
在父级上设置该属性，作用使改变子元素的排列顺序，
normal  默认值，子代按html顺序排列  1，2，3，4
reverse  反序，所有元素相反顺序来 ，4，3，2，1
box-align:start/end/center/stretch
在父级设置，子代的垂直对齐方式。
start  垂直顶部对齐
end 垂直底部对齐
center 垂直居中对齐
stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。
注：我们一般多使用box-align:center;来实现子元素的垂直居中。
box-pack:start/end/center
在父级设置，子代的水平对齐方式。
start  水平左对齐
end    水平右对齐
center  水平居中对齐
注：我们一般多使用box-pack:center来实现子元素水平居中方式
box-flex: 1
 作用与flex: 1;相同。若子元素设置固定宽高，则子元素按照该子元素的宽和高，若没有设置该属性的子元素会占满具有display:box属性父元素中剩余的所有的空间。
设置为1则为所有剩余空间，可以为负数。
若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份
 
大家不难发现display:box属性与display:flex属性几乎一模一样，就下来就会有人问了，这两个一样的东西到底有什么区别呢？
- W3C 2009年第1次草案：[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
- W3C 2011年第2次草案：[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)
- W3C 2012年第5次草案及以后的候选推荐标准：[display:flex | inline-flex;](https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/)
前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。
后者是2009年的语法，已经过时，是需要加上对应前缀的。
所以兼容性的代码，大致如下
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
如果要说区别，display：box； 是老规范，要兼顾古董机子就加上它。
flexbox flex 是新规范，老机子不支持的