說明：為了便于理解和分析，此處我們?nèi)渴褂脡K級元素div來進行說明。因為要將這個文檔應(yīng)用于博客，所以所有的樣式寫在style中。公眾號不支持，博客樣式支持不好，又重新上傳了圖片，替換了展示效果（淚目）。你們能懂用純文本編輯器編輯了一天，發(fā)現(xiàn)不能用的心情嘛！標題一二三不代表這些概念同級，僅僅代表本文提到的順序。

關(guān)于盒式布局的定義和說明，請自行搜索了解，此處不做詳細說明。我這里引入幾個概念，是我自己理解所得，不權(quán)威，但有利于學習和理解。

一、塊block

我把頁面中寬度占滿屏幕，高度任意的元素（或者區(qū)域）稱為塊。不管是盒式布局中常提到的上中下結(jié)構(gòu)、左右結(jié)構(gòu)和復雜結(jié)構(gòu)，都可以用這個概念簡化。

如：上中下結(jié)構(gòu)，可將下圖的頁頭、主體和頁腳視為三個塊。

如：左右結(jié)構(gòu)，可將菜單和主體組合起來的整體視為一個塊。如下所示，綠色框框視為一個塊。

如：復雜結(jié)構(gòu)，也是一樣的將頁面分成獨立的塊。不管里面元素的布局，先從整體上分析和實現(xiàn)。

二、項item

其實項的概念和塊的概念相同，只是把同樣概念的-寬度占滿屏幕，高度任意的一個塊稱為項。

如：常用移動頁面的首頁

如上圖所示，我將圖中紅色邊框的塊稱為一個項，并不理會項中是單一元素還是復雜元素。如第一項中單一的banner，第二項中四個菜單按鈕，和最后那幾個項中的左右上下結(jié)構(gòu)。

其實上圖中的標題和詳細說明，這個上下結(jié)構(gòu)也可以理解為一個項，只是它是放在外層大項中的小項。

 

三、Flex彈性布局

 

理解了上述兩個概念，接下來我們就比較容易理解Flex彈性布局了。要是用彈性布局，塊級元素設(shè)置display:flex;行內(nèi)元素設(shè)置display:inline-flex;將該元素設(shè)置為Flex容器。表明該元素內(nèi)的子元素將使用彈性布局。注意設(shè)置成Flex容器之后，內(nèi)部子元素（以下稱為子項）的浮動和對齊屬性都會失效。接下來我們對Flex容器的各個屬性進行說明。

• flex-direction 子項的排列方向，分為從左到右，從右到左，從上到下，從下到上
• flex-wrap 子項排列不下之后是否換行，分為不換行，排到下一行，排到上一行
• flex-flow 上面兩個屬性的組合，如可以直接設(shè)置從左到右排列，排不下排到下一行。
• justify-content 子項在排列方向上的對齊方式，（橫向說明）分為左對齊，右對齊，居中對齊，兩端對齊中間等分布局和全部等間距布局
• align-items 子項在另一個方向上的對齊方式，（橫向說明）分為上對齊，下對齊，居中對齊，上下拉伸充滿，子項首行文字對齊
• align-content 在子項內(nèi)容排列多行時整體的對齊方式（就是設(shè)置行和行之間的排列），分為全部靠上、全部靠下、居中等，IE、Safari、Firefox不支持這個屬性（小程序中完全支持）

1、flex-direction 子項的排列方向，分為從左到右，從右到左，從上到下，從下到上

1.1 row 從左到右display: flex;flex-direction:row;

[html] view plain copy

 

1. <div style="padding: 10px;border: 1px solid black;display: flex;flex-direction:row;">  
2.     <div style="border: 1px solid red;">頁頭</div>  
3.     <div style="border: 1px solid blue;">主體</div>  
4.     <div style="border: 1px solid green;">頁腳</div>  
5. </div>  

1.2 row-reverse 從右到左display: flex;flex-direction:row-reverse;

1.3 column 從上到下display: flex;flex-direction:column;

1.4 column-reverse 從下到上display: flex;flex-direction:column-reverse;

2、flex-wrap 子項排列不下之后是否換行，分為不換行，排到下一行，排到上一行

2.1 nowrap 不換行display: flex;flex-direction:row;flex-wrap:nowrap;

[html] view plain copy

 

1. <div style="width:120px;padding: 10px;border: 1px solid black;display: flex;flex-direction:row;flex-wrap: nowrap;">  
2.     <div style="width:50px;border: 1px solid red;">頁頭</div>  
3.     <div style="width:50px;border: 1px solid blue;">主體</div>  
4.     <div style="width:50px;border: 1px solid green;">頁腳</div>  
5. </div>  

這里外層容器和子項都設(shè)置了寬度，但實際的并沒有效果，會自動擴展。

2.2 wrap 排到下一行display: flex;flex-direction:row;flex-wrap:wrap;

2.3 wrap-reverse 排到上一行display: flex;flex-direction:row;flex-wrap:wrap-reverse;

3、flex-flow 上面兩個屬性的組合，如可以直接設(shè)置從左到右排列，排不下排到下一行

[html] view plain copy

 

1. <div style="width:120px;padding: 10px;border: 1px solid black;display: flex;flex-flow:row wrap;">  
2.     <div style="width:50px;border: 1px solid red;">頁頭</div>  
3.     <div style="width:50px;border: 1px solid blue;">主體</div>  
4.     <div style=