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 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分