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

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

一、塊block

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

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

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

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

二、項(xiàng)item

其實(shí)項(xiàng)的概念和塊的概念相同，只是把同樣概念的-寬度占滿屏幕，高度任意的一個(gè)塊稱為項(xiàng)。

如：常用移動(dòng)頁(yè)面的首頁(yè)

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

其實(shí)上圖中的標(biāo)題和詳細(xì)說(shuō)明，這個(gè)上下結(jié)構(gòu)也可以理解為一個(gè)項(xiàng)，只是它是放在外層大項(xiàng)中的小項(xiàng)。

 

三、Flex彈性布局

 

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

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

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

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;">頁(yè)頭</div>  
3.     <div style="border: 1px solid blue;">主體</div>  
4.     <div style="border: 1px solid green;">頁(yè)腳</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 子項(xiàng)排列不下之后是否換行，分為不換行，排到下一行，排到上一行

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;">頁(yè)頭</div>  
3.     <div style="width:50px;border: 1px solid blue;">主體</div>  
4.     <div style="width:50px;border: 1px solid green;">頁(yè)腳</div>  
5. </div>  

這里外層容器和子項(xiàng)都設(shè)置了寬度，但實(shí)際的并沒(méi)有效果，會(huì)自動(dòng)擴(kuò)展。

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 上面兩個(gè)屬性的組合，如可以直接設(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;">頁(yè)頭</div>  
3.     <div style="width:50px;border: 1px solid blue;">主體</div>  
4.     <div style=