微信官方文件地址:

https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=00080e799303986b0086e605f5680a

4.2 基本的佈局方法——Flex佈局

如果之前你接觸過網頁開發中的flexbox佈局，基本上你可以略過這節。但有一點需要注意的是，你的小程式要求相容到iOS8以下版本，需要開啟樣式自動補全。開啟樣式自動補全，在“專案”—“專案設定”—勾選“上傳程式碼時樣式自動補全”。

​ 圖4-2 開發者工具開啟樣式自動補全

在小程式開發中，我們需要考慮各種尺寸終端裝置上的適配。在傳統網頁開發，我們用的是盒模型，通過display:inline | block | inline-block、 position、float來實現佈局，缺乏靈活性且有些適配效果難以實現。比如像下面這種常見的資訊列表，要求內容高度不確定下保持垂直居中：

​ 圖4-3 常見的資訊列表排版方式

這種情況下，我們更建議用flex佈局。

在開始介紹flex之前，為了表述方便，我們約定以下術語：採用flex佈局的元素，簡稱為“容器”，在程式碼示例中以container表示容器的類名。容器內的元素簡稱為“專案”，在程式碼示例中以item表示專案的類名。

​ 圖4-4 container容器和item專案

4.2.1 基本概念

flex的概念最早是在2009年被提出，目的是提供一種更靈活的佈局模型，使容器能通過改變裡面專案的高寬、順序，來對可用空間實現最佳的填充，方便適配不同大小的內容區域。

在不固定高度資訊的例子中，我們只需要在容器中設定以下兩個屬性即可實現內容不確定下的垂直居中。

.container{

  display: flex;

  flex-direction: column;

  justify-content: center;

}

flex不單是一個屬性，它包含了一套新的屬性集。屬性集包括用於設定容器，和用於設定專案兩部分。

設定容器的屬性有：

display:flex;

flex-direction:row（預設值） | row-reverse | column |column-reverse

flex-wrap:nowrap（預設值） | wrap | wrap-reverse

justify-content:flex-start（預設值） | flex-end | center |space-between | space-around | space-evenly

align-items:stretch（預設值） | center  | flex-end | baseline | flex-start

align-content:stretch（預設值） | flex-start | center |flex-end | space-between | space-around | space-evenly

設定專案的屬性有：

order:0（預設值） | <integer>

flex-shrink:1（預設值） | <number>

flex-grow:0（預設值） | <number>

flex-basis:auto（預設值） | <length>

flex:none | auto | @flex-grow @flex-shrink @flex-basis

align-self:auto（預設值） | flex-start | flex-end |center | baseline| stretch

在開始介紹各個屬性之前，我們需要先明確一個座標軸。預設的情況下，水平方向的是主軸（main axis），垂直方向的是交叉軸（cross axis）。

​ 圖4-5 預設情況下的主軸與交叉軸

專案是在主軸上排列，排滿後在交叉軸方向換行。需要注意的是，交叉軸垂直於主軸，它的方向取決於主軸方向。

​ 圖4-6 專案是在主軸上排列，排滿後在交叉軸方向換行

接下來的例子如無特殊宣告，我們都以預設情況下的座標軸為例。

4.2.2 容器屬性

設定容器，用於統一管理容器內專案佈局，也就是管理專案的排列方式和對齊方式。

flex-direction 屬性

通過設定座標軸，來設定專案排列方向。

.container{
  flex-direction: row（預設值） | row-reverse | column | column-reverse
}

row（預設值）：主軸橫向，方向為從左指向右。專案沿主軸排列，從左到右排列。

row-reverse：row的反方向。主軸橫向，方向為從右指向左。專案沿主軸排列，從右到左排列。

column：主軸縱向，方向從上指向下。專案沿主軸排列，從上到下排列。

column-reverse：column的反方向。主軸縱向，方向從下指向上。專案沿主軸排列，從下到上排列。

​ 圖4-7 flex-direction

設定是否允許專案多行排列，以及多行排列時換行的方向。

.container{
  flex-wrap: nowrap（預設值） | wrap | wrap-reverse
}

nowrap（預設值）：不換行。如果單行內容過多，則溢位容器。
wrap：容器單行容不下所有專案時，換行排列。
wrap-reverse：容器單行容不下所有專案時，換行排列。換行方向為wrap時的反方向。

​ 圖4-8 flex-wrap

justify-content 屬性

設定專案在主軸方向上對齊方式，以及分配專案之間及其周圍多餘的空間。

.container{

  justify-content: flex-start（預設值） | flex-end | center | space-between | space-around| space-evenly

}

flex-start（預設值）：專案對齊主軸起點，專案間不留空隙。

center：專案在主軸上居中排列，專案間不留空隙。主軸上第一個專案離主軸起點距離等於最後一個專案離主軸終點距離。

flex-end：專案對齊主軸終點，專案間不留空隙。
space-between：專案間間距相等，第一個專案離主軸起點和最後一個專案離主軸終點距離為0。
space-around：與space-between相似。不同點為，第一個專案離主軸起點和最後一個專案離主軸終點距離為中間專案間間距的一半。

space-evenly：專案間間距、第一個專案離主軸起點和最後一個專案離主軸終點距離等於專案間間距。

​ 圖4-9 justify-content

align-items 屬性

設定專案在行中的對齊方式。

.container{

  align-items:stretch（預設值） | flex-start | center | flex-end | baseline

}

stretch（預設值）：專案拉伸至填滿行高。
flex-start：專案頂部與行起點對齊。
center：專案在行中居中對齊。
flex-end：專案底部與行終點對齊。
baseline：專案與行的基線對齊。

​ 圖4-10 align-items

align-content 屬性

多行排列時，設定行在交叉軸方向上的對齊方式，以及分配行之間及其周圍多餘的空間。

.container{

  align-content: stretch（預設值） | flex-start | center | flex-end | space-between |space-around | space-evenly

}

stretch（預設值）：當未設定專案尺寸，將各行中的專案拉伸至填滿交叉軸。當設定了專案尺寸，專案尺寸不變，專案行拉伸至填滿交叉軸。

flex-start：首行在交叉軸起點開始排列，行間不留間距。

center：行在交叉軸中點排列，行間不留間距，首行離交叉軸起點和尾行離交叉軸終點距離相等。

flex-end：尾行在交叉軸終點開始排列，行間不留間距。
space-between：行與行間距相等，首行離交叉軸起點和尾行離交叉軸終點距離為0。
space-around：行與行間距相等，首行離交叉軸起點和尾行離交叉軸終點距離為行與行間間距的一半。

space-evenly：行間間距、以及首行離交叉軸起點和尾行離交叉軸終點距離相等。

​ 圖4-11 align-content

4.2.3 專案屬性

設定專案，用於設定專案的尺寸、位置，以及對專案的對齊方式做特殊設定。

order 屬性

設定專案沿主軸方向上的排列順序，數值越小，排列越靠前。屬性值為整數。

.item{

  order: 0（預設值） | <integer>


}

​ 圖4-12 order

flex-shrink 屬性

當專案在主軸方向上溢位時，通過設定專案收縮因子來壓縮專案適應容器。屬性值為專案的收縮因子，屬性值取非負數。

.item{

  flex-shrink: 1（預設值） | <number>

}

.item1{

  width: 120px;

  flex-shrink: 2; 

}

.item2{

  width: 150px;

  flex-shrink: 3; 

}

.item3{// 專案3未設定flex-shrink，預設flex-shrink值為1

  width: 180px;

}

為了加深理解，我們舉個例子：

一個寬度為400px的容器，裡面的三個專案width分別為120px，150px，180px。分別對這專案1和專案2設定flex-shrink值為2和3。

.container{

  display: flex;

  width: 400px; // 容器寬度為400px

}

在這個例子中，專案溢位 400 - (120 + 150 + 180) = -50px。計算壓縮量時總權重為各個專案的寬度乘以flex-shrink的總和，這個例子壓縮總權重為120 2 + 150 3+ 180 * 1 = 870。各個專案壓縮空間大小為總溢位空間乘以專案寬度乘以flex-shrink除以總權重：

item1的最終寬度為：120 - 50 120 2 / 870 ≈ 106px

item2的最終寬度為：150 - 50 150 3 / 870 ≈ 124px

item3的最終寬度為：180 - 50 180 1 / 870 ≈ 169px

其中計算時候值如果為小數，則向下取整。

​ 圖4-13 flex-shrink

需要注意一點，當專案的壓縮因子相加小於1時，參與計算的溢位空間不等於完整的溢位空間。在上面例子的基礎上，我們改變各個專案的flex-shrink。

.container{

  display: flex;

  width: 400px; // 容器寬度為400px

}

.item1{

  width: 120px;

  flex-shrink: 0.1; 

}

.item2{

  width: 150px;

  flex-shrink: 0.2; 

}

.item3{

  width: 180px;

  flex-shrink: 0.3;

}

總權重為：120 0.1 + 150 0.2 + 180 0.3 = 96。參與計算的溢位空間不再是50px，而是50 (0.1 + 0.2 + 0.3) / 1 =30：

item1的最終寬度為：120 - 30 120 0.1 / 96 ≈ 116px

item2的最終寬度為：150 - 30 150 0.2 / 96 ≈ 140px

flex-grow 屬性

當專案在主軸方向上還有剩餘空間時，通過設定專案擴張因子進行剩餘空間的分配。屬性值為專案的擴張因子，屬性值取非負數。

.item{

  flex-grow: 0（預設值） | <number>

}

為了加深理解，我們舉個例子：

一個寬度為400px的容器，裡面的三個專案width分別為80px，120px，140px。分別對這專案1和專案2設定flex-grow值為3和1。

.container{

  display: flex;

  width: 400px; // 容器寬度為400px

}

.item1{

  width: 80px;

  flex-grow: 3; 

}

.item2{

  width: 120px;

  flex-grow: 1; 

}

.item3{// 專案3未設定flex-grow，預設flex-grow值為0

  width: 140px;

}

在這個例子中，容器的剩餘空間為 400 - (80 + 120 + 140) = 60px。剩餘空間按 60 / (3 + 1 + 0) = 15px進行分配：

item1的最終寬度為：80+ (15 * 3) = 125px

item2的最終寬度為：120 + (15 * 1) = 135px

item3的最終寬度為：140 + (15 * 0) =140px

​ 圖4-14 flex-grow

需要注意一點，當專案的擴張因子相加小於1時，剩餘空間按除以1進行分配。在上面例子的基礎上，我們改變各個專案的flex-grow。

.container{

  display: flex;

  width: 400px; // 容器寬度為400px

}

.item1{

  width: 50px;

  flex-grow: 0.1; 

}

.item2{

  width: 80px;

  flex-grow: 0.3; 

}

.item3{

  width: 110px;

  flex-grow: 0.2;

}

在這個例子中，容器的剩餘空間為 400 - (50 + 80 + 110) = 160px。由於專案的flex-grow相加0.1 + 0.3 + 0.2 = 0.6小於1，剩餘空間按 160 / 1 = 160px劃分。例子中的專案寬度分別為：

item1的最終寬度為：50 + (160 * 0.1) = 66px

item2的最終寬度為：80 + (160 * 0.3) = 128px

item3的最終寬度為：110 + (160 * 0.2) = 142px

flex-basis 屬性

當容器設定flex-direction為row或row-reverse時，flex-basis和width同時存在，flex-basis優先順序高於width，也就是此時flex-basis代替專案的width屬性。

當容器設定flex-direction為column或column-reverse時，flex-basis和height同時存在，flex-basis優先順序高於height，也就是此時flex-basis代替專案的height屬性。

需要注意的是，當flex-basis和width（或height），其中一個屬性值為auto時，非auto的優先順序更高。

.item{

  flex-basis: auto（預設值） | <number>px

}

​ 圖4-15 flex-basis

flex 屬性

是flex-grow，flex-shrink，flex-basis的簡寫方式。值設定為none，等價於00 auto。值設定為auto，等價於1 1 auto。

.item{

  flex: none | auto | @flex-grow @[email protected]

}

align-self 屬性

設定專案在行中交叉軸方向上的對齊方式，用於覆蓋容器的align-items，這麼做可以對專案的對齊方式做特殊處理。預設屬性值為auto，繼承容器的align-items值，當容器沒有設定align-items時，屬性值為stretch。

.item{

  align-self: auto（預設值） | flex-start | center | flex-end | baseline |stretch

}

​ 圖4-16 align-self