1、box盒模型
在平常的web橫排布局中，會經常用到float或display:inline-block，但是在多種不同寬度的移動設備的自適應布局中用的話，還得設置百分比寬度和考慮清除浮動。
box-flex是css3新添加的盒子模型屬性,一個布局應用就是布局的垂直等高、水平均分、按比例劃分。
使用需要加游覽器的前綴irefox(-moz)、opera(-0)、chrome/safari（-webkit)。
display:box;
必須給父容器定義該盒子屬性,子容器才可以進行劃分,則該容器則定義為內聯元素，內部元素設置margin:0px auto無效的，要想使其居中只能通過父容器屬性。
2、flex盒模型
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。常規布局是基于塊和內聯流方向，而Flex布局是基于flex-flow流。
主軸 ：項目排列方向的軸（可以是水平或者垂直），每一行（列）項目代表一條軸
交叉軸：與主軸垂直的軸（可以是水平或者垂直）；
主軸（main axis）：伸縮容器的主軸，伸縮項目主要沿著這條軸進行排列布局。
主軸起點（main-start）和主軸終點（main-end）：伸縮項目在伸縮容器內從主軸起點向主軸終點方向。
主軸尺寸（main size）：伸縮項目在主軸方向的寬度或高度就是主軸的尺寸
側軸（cross axis）：垂直于主軸稱為側軸。
側軸起點（cross-start）和側軸終點（cross-end）：伸縮行從容器的側軸起點邊開始，到側軸終點。
側軸尺寸（cross size）：伸縮項目的在側軸方向的寬度或高度就是項目的側軸長度。
設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
(1)容器屬性（父元素屬性）
(2)項目屬性（子元素）
遠近互聯前端小華整理發布，希望能對學習技術的你有所幫助
遠近互聯專業提供網站建設、APP開發、網站優化、外貿網站SEO、微信運營的品牌整合營銷服務讓客戶通過網絡品牌建立與網絡傳播提高業績。
