微信小程序開發--從block盒式佈局到Flex彈性佈局

時間 2019-12-06

標籤微信程序開發 block 盒式佈局 flex 彈性欄目 Flex 简体版

原文原文鏈接

微信小程序開發--從block盒式佈局到Flex彈性佈局

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

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

1、塊block微信小程序

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

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

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

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

2、項itemflex

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

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

如上圖所示，我將圖中紅色邊框的塊稱爲一個項，並不理會項中是單一元素仍是複雜元素。如第一項中單一的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;

[html] view plain copy

<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;

[html] view plain copy

<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 上面兩個屬性的組合，如能夠直接設置從左到右排列，排不下排到下一行

[html] view plain copy

<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;

[html] view plain copy

<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;

[html] view plain copy

<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;

[html] view plain copy

<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>