使用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 | 任意數字; 該屬性讓子容器針對父容器的寬度按一定規則進行劃分
--------------------- 
作者：miss_June 
來源：CSDN 
原文：https://blog.csdn.net/AliceWu_1111/article/details/81327285?utm_source=copy 
版權宣告：本文為博主原創文章，轉載請附上博文連結！

轉載於：https://blog.csdn.net/AliceWu_1111/article/details/81327285