全棧工程師之路-中級篇之小程序開發-第一章第四節從block盒式佈局到Flex彈性佈局

說明：爲了便於理解和分析，此處咱們所有使用塊級元素div來進行說明。由於要將這個文檔應用於博客，因此全部的樣式寫在style中。公衆號不支持，博客樣式支持很差，又從新上傳了圖片，替換了展現效果（淚目）。大家能懂用純文本編輯器編輯了一天，發現不能用的心情嘛！標題一二三不表明這些概念同級，僅僅表明本文提到的順序。

關於盒式佈局的定義和說明，請自行搜索瞭解，此處不作詳細說明。我這裏引入幾個概念，是我本身理解所得，不權威，但有利於學習和理解。

1、塊block

我把頁面中寬度佔滿屏幕，高度任意的元素（或者區域）稱爲塊。不論是盒式佈局中常提到的上中下結構、左右結構和複雜結構，均可以用這個概念簡化。

如：上中下結構，可將下圖的頁頭、主體和頁腳視爲三個塊。

如：左右結構，可將菜單和主體組合起來的總體視爲一個塊。以下所示，綠色框框視爲一個塊。

如：複雜結構，也是同樣的將頁面分紅獨立的塊。無論裏面元素的佈局，先從總體上分析和實現。

2、項item

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

如：經常使用移動頁面的首頁

如上圖所示，我將圖中紅色邊框的塊稱爲一個項，並不理會項中是單一元素仍是複雜元素。如第一項中單一的banner，第二項中四個菜單按鈕，和最後那幾個項中的左右上下結構。

其實上圖中的標題和詳細說明，這個上下結構也能夠理解爲一個項，只是它是放在外層大項中的小項。

3、Flex彈性佈局

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

• flex-direction 子項的排列方向，分爲從左到右，從右到左，從上到下，從下到上
• flex-wrap 子項排列不下以後是否換行，分爲不換行，排到下一行，排到上一行
• flex-flow 上面兩個屬性的組合，如能夠直接設置從左到右排列，排不下排到下一行。
• justify-content 子項在排列方向上的對齊方式，（橫向說明）分爲左對齊，右對齊，居中對齊，兩端對齊中間等分佈局和所有等間距佈局
• align-items 子項在另外一個方向上的對齊方式，（橫向說明）分爲上對齊，下對齊，居中對齊，上下拉伸充滿，子項首行文字對齊
• align-content 在子項內容排列多行時總體的對齊方式（就是設置行和行之間的排列），分爲所有靠上、所有靠下、居中等，IE、Safari、Firefox不支持這個屬性（小程序中徹底支持）

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

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

    <div style="padding: 10px;border: 1px solid black;display: flex;flex-direction:row;">
        <div style="border: 1px solid red;">頁頭</div>
        <div style="border: 1px solid blue;">主體</div>
        <div style="border: 1px solid green;">頁腳</div>
    </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;

二、flex-wrap 子項排列不下以後是否換行，分爲不換行，排到下一行，排到上一行

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

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

這裏外層容器和子項都設置了寬度，但實際的並無效果，會自動擴展。

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

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

三、flex-flow 上面兩個屬性的組合，如能夠直接設置從左到右排列，排不下排到下一行

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

四、justify-content 子項在排列方向上的對齊方式，（橫向說明）分爲左對齊，右對齊，居中對齊，兩端對齊中間等分佈局和所有等間距佈局

4.1 flex-start 左對齊display: flex;flex-direction:row;justify-content:flex-start;

<div style="width:300px;height:50px;padding: 10px;border: 1px solid black;display: flex;flex-direction:row;justify-content:flex-start">
    <div style="border: 1px solid red;">頁頭</div>
    <div style="border: 1px solid blue;">主體</div>
    <div style="border: 1px solid green;">頁腳</div>
</div>

4.2 flex-end 右對齊display: flex;flex-direction:row;justify-content:flex-end;

4.3 center 居中對齊display: flex;flex-direction:row;justify-content:center;

4.4 space-between 兩端對齊中間等分佈局display: flex;flex-direction:row;justify-content:space-between;

4.5 space-around 所有等間距佈局display: flex;flex-direction:row;justify-content:space-around;

五、align-items 子項在另外一個方向上的對齊方式，（橫向說明）分爲上對齊，下對齊，居中對齊，上下拉伸充滿，子項首行文字對齊

5.1 flex-start 上對齊display: flex;flex-direction:row;align-items:flex-start;

<div style="width:300px;height:50px;padding: 10px;border: 1px solid black;display: flex;flex-direction:row;align-items:flex-start;">
    <div style="font-size:12px;border: 1px solid red;">頁頭</div>
    <div style="font-size:24px;border: 1px solid blue;">主體</div>
    <div style="font-size:36px;border: 1px solid green;">頁腳</div>
</div>

5.2 flex-end 下對齊display: flex;flex-direction:row;align-items:flex-end;

5.3 center 居中對齊display: flex;flex-direction:row;align-items:center;

5.4 stretch 上下拉伸充滿display: flex;flex-direction:row;align-items:stretch;

5.5 baseline 子項首行文字對齊display: flex;flex-direction:row;align-items:baseline;

六、align-content 在子項內容排列多行時總體的對齊方式（就是設置行和行之間的排列），（橫向說明）分爲所有靠上、所有靠下、居中等，IE、Safari、Firefox不支持這個屬性

6.1 flex-start 所有靠上display: flex;flex-flow:row wrap;align-content:flex-start;

<div style="width:300px;height:110px;padding: 10px;border: 1px solid black;display: flex;flex-flow:row wrap;align-content:flex-start;">
    <div style="width:50px;border: 1px solid red;">頁頭1</div>
    <div style="width:50px;border: 1px solid red;">頁頭2</div>
    <div style="width:50px;border: 1px solid red;">頁頭3</div>
    <div style="width:50px;border: 1px solid red;">頁頭4</div>
    <div style="width:50px;border: 1px solid blue;">主體1</div>
    <div style="width:50px;border: 1px solid blue;">主體2</div>
    <div style="width:50px;border: 1px solid blue;">主體3</div>
    <div style="width:50px;border: 1px solid blue;">主體4</div>
    <div style="width:50px;border: 1px solid green;">頁腳1</div>
    <div style="width:50px;border: 1px solid green;">頁腳2</div>
    <div style="width:50px;border: 1px solid green;">頁腳3</div>
    <div style="width:50px;border: 1px solid green;">頁腳4</div>
</div>

6.2 flex-end 所有靠下display: flex;flex-flow:row wrap;align-content:flex-end;

6.3 center 所有居中display: flex;flex-flow:row wrap;align-content:center;

6.4 space-between 兩端對齊中間行等分佈局display: flex;flex-flow:row wrap;align-content:space-between;

6.5 space-around 所有行等分佈局display: flex;flex-flow:row wrap;align-content:space-around;

6.6 stretch 行上下拉伸充滿display: flex;flex-flow:row wrap;align-content:stretch;

這裏我將全部的佈局都羅列出來，但願能讓你們明白Flex的特色和用法，等到實際開發中有涉及相關內容的時候，再去查閱詳細的API便可，子項也有相似的幾個屬性，用戶設置佈局和順序，詳細內容請另行查閱資料。

第一次使用html標籤寫博客，感受頁面寫的有點亂，你們將就一下。

源文件 百度雲http://pan.baidu.com/s/1eSDyIga 密碼6q1d

這節課的內容就到這裏結束了。

感謝您的閱讀。

我是小虎（最近把名字改爲了莽夫，以爲比較符合個人性格特徵，說好的行不更名坐不改姓呢，捂臉），但願你開心。

若是你以爲本文對你有幫助，請掃描文末二維碼，支持博主原創。

但願你們關注個人我的公衆號ionic_