目錄

這篇文章主要介紹了Flex佈局，參考了這篇文章

搭建UI介面

對於iOS開發者來說，UI佈局可以使用座標（frame），也可以使用自動佈局。對於微信小程式來說，建議使用Flex佈局。

通過上一篇的學習，我們知道了.wxss是設定樣式表的檔案，所以我們今天學習的flex佈局的程式碼是寫在.wxss檔案中的。我是理解為iOS中的frame設定程式碼。

flex佈局簡介

Flex佈局也叫彈性佈局是CSS3提出的一種佈局解決方案。目前已得到所有現在瀏覽器的支援。

Flex術語簡介：

微信官方建議視覺稿以iPhone 6為標準

容器預設存在兩根軸：水平方向主軸(main axis)和垂直方向交叉軸(cross axis)，預設專案按主軸排列。
main start/main end：主軸開始位置/結束位置；
cross start/cross end：交叉軸開始位置/結束位置；
main size/cross size：單個專案佔據主軸/交叉軸的空間；

可以結合iOS frame佈局的x、y、w、h來理解

主軸： flex-direction來定義主軸，row和row-reverse就是橫軸是主軸。
交叉軸：主軸之外的另一個軸就是交叉軸。

flex容器屬性

• flex-direction：專案的排列方向
• flex-wrap：換行
• flex-flow：flex-direction和flex-wrap的簡寫
• justify-content：定義專案在主軸上的對齊方式
• align-item：定義在交叉軸上的對齊方式
• align-content：多根軸線的對齊方式

flex-direction：專案的排列方向

.box
 
 {
   flex-direction: row | row-reverse | column | column-reverse;
}

• row（預設）：主軸水平方向，起點在左端；(可以理解為橫著左對齊)
• row-reverse：主軸水平方向，起點在右端；（可以理解為橫著右對齊）
• column：主軸垂直方向，起點在上邊沿；（可以理解為豎著上對齊）
• column-reserve：主軸垂直方向，起點在下邊沿。（可以理解為豎著下對齊）

flex-wrap：換行

預設情況下，專案都在一條軸線上排列，但可能一條軸線排列不下。

.box{
   flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（預設）：不換行
• wrap：換行，第一行在上邊
• wrap-reverse：換行，第一行在下邊

flex-flow：flex-direction和flex-wrap的簡寫

.box{
    flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content：定義專案在主軸上的對齊方式

對齊方式與軸的方向有關，這裡假設主軸從左到右。

.box {
   justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline;
}

• flex-start（預設）：左對齊；
• flex-end：右對齊；
• center：居中；
• space-between：兩端對齊，專案之間間隔相等；
• space-around：每個專案兩側的間隔相等，即專案之間的間隔比專案與邊框的間隔大一倍。（我把他們理解為tableview的sectionHeader和SectionFooter距離相等）
  
  
  
  
  

align-item：定義在交叉軸上的對齊方式

對齊方式與交叉軸的方向有關，假設交叉軸從下到上。

.box{
    align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：與交叉軸的起點對齊；
• flex-end：與交叉軸的終點對齊；
• center：與交叉軸的中心對齊；
• baseline：專案的第一行文字的基線對齊；
• stretch：（預設）如果專案未設定高度或設為auto，將佔滿整個容器的高度

baseline：專案的第一行文字的基線對齊；

stretch

align-content：多根軸線的對齊方式

前提是多根軸線，也就是設定flex-wrap的前提下，設定該屬性

.box{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start：與交叉軸的起點對齊；
• flex-end：與交叉軸的終點對齊；
• center：與交叉軸的中心對齊；
• space-between：與交叉軸的兩端對齊，軸線之間的間隔平均分佈；
• space-around：每根軸線兩側的間隔相等，即軸線之間的間隔比軸線與邊框的間隔大一倍；（我的理解角度：tableview的section Header和section Footer）
• stretch：（預設）軸線佔滿整個交叉軸。

flex item專案屬性

• order：專案的排列順序
• flex-grow：專案的放大比例
• flex-shrink：專案的縮小比例
• flex-basis：定義在分配多餘空間之前，專案佔據的主軸空間
• flex：flex-grow，flex-shrink和flex-basis的簡寫
• align-self：允許單個專案與其他專案有不一樣的對齊方式

order：專案的排列順序

數值越小，排列越靠前，預設為0，可以是負值。

.item {
    order: <整數>;
}

flex-grow：專案的放大比例

預設值為0，即如果空間有剩餘，也不放大。
可以是小數，按比例佔據剩餘空間。

.item{
    flex-grow: <數字>;
}

設定flex-grow為0的專案不放大

舉例子：
若都是預設0，有空餘空間也不放大

若所有專案的flex-grow的數值都相同，非0，則等比放大，也就是等分剩餘空間

若果有一個專案flex-grow為2，其餘都為1，則該專案佔據剩餘空間是其餘的2倍

flex-shrink：專案的縮小比例

預設值都為1，即如果空間不足將等比例縮小。
如果有一個專案的值為0，其他專案為1，當空間不足時，該專案不縮小。
負值對該屬性無效，容器不應該設定flex-wrap。

.item{
    flex-shrink: <非負整數>;
}

設定flex-shrink為0的專案不縮小

舉例子：
如果一個專案設定flex-shrink為0；而其他專案都為1，則空間不足時，該專案不縮小

如果所有專案都為0，則都不縮小，當空間不足時，專案撐破容器而溢位。

如果設定專案的flex-shrink不為0的非負數效果同設定為1。

flex-basis：定義在分配多餘空間之前，專案佔據的主軸空間

預設值為auto，瀏覽器根據此屬性檢查主軸是否有多餘空間。

.item{
    flex-basis:  <auto或者px>;
}

注意：設定的flex-basis是分配多餘空間之前專案佔據的主軸空間，如果空間不足則預設情況下該專案也會縮小。

舉例子：
設定flex-basis為350px，但空間充足

設定flex-basis為350px，但空間不足，專案實際小於設定值350px

flex：flex-grow，flex-shrink和flex-basis的簡寫

預設值為0 1 auto，第一個屬性必須，後兩個屬性可選。

.item{
    flex: none | [<flex-grow><flex-shrink><flex-basis>];
}

可以用 flex:auto; 代替 flex: 1 1 auto;；
可以用 flex: none;代替 flex: 0 0 auto；

align-self：允許單個專案與其他專案有不一樣的對齊方式

預設值為auto，表示繼承父元素的align-items屬性，並可以覆蓋align-items屬性。

.item{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}