微信小程序開發：學習筆記[4]——樣式布局

Flex布局

新的布局方式

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

　　

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

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

基本概念

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

　　

設置容器的屬性有：

1.flex-direction:row（默認值） | row-reverse | column |column-reverse     屬性決定主軸的方向（即項目的排列方向）

2.flex-wrap:nowrap（默認值[不換行]） | wrap[換行] | wrap-reverse　　默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

（1）nowrap（默認）：不換行。

（2）wrap：換行，第一行在上方。

（3）wrap-reverse：換行，第一行在下方。

3.justify-content:flex-start（默認值） | flex-end | center |space-between | space-around | space-evenly 定義了項目在主軸上的排列方式

4.align-items:stretch（默認值） | center  | flex-end | baseline | flex-start 定義項目在交叉軸上的排列方式

5.align-content:stretch（默認值） | flex-start | center |flex-end | space-between | space-around | space-evenly　　定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

設置項目的屬性有：

1.order:0（默認值） | <integer> 定義項目的排列順序，數組越小，越靠前，默認為0；

2.flex-shrink:1（默認值） | <number> 定義項目的縮小比列，默認為1，即如果該空間不足，項目將縮小。

如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

負值對該屬性無效

3.flex-grow:0（默認值） | <number> 定義項目的放大比例，默認為0.即存在剩余空間，也不放大。

如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。

4.flex-basis:auto（默認值） | <length>
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

5.flex:none | auto | @flex-grow @flex-shrink @flex-basis  是flex-grow，flex-shrink，flex-basis的簡寫方式。值設置為none，等價於00 auto。值設置為auto，等價於1 1 auto。

6.align-self:auto（默認值） | flex-start | flex-end |center | baseline| stretch
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。