微信小程序使用flexbox容器，flexbox布局由伸縮容器和伸縮項目組成。任何一個元素都可以指定為flexbox布局，其中設為display:flex或者display:inline-flex的元素稱為伸縮容器。伸縮容器的子元素稱為伸縮項目，伸縮項目使用伸縮布局模型來排版。伸縮布局模型與傳統的布局不一樣，它按照伸縮流的方向布局。請看下面的經典圖片

默認情況下，伸縮容器由兩根軸組成，主軸(main)和交叉軸(cross)，其中主軸的開始位置叫main start，結束位置叫main end。交叉軸的開始位置叫cross start，結束位置叫cross end 。伸縮項目的主軸上的占據空間叫main axis，在交叉軸上的占據位置叫cross axis，根據設置情況的不同。主軸既可以是水平軸，也可以是垂直軸。不論哪個軸作為主軸，默認情況下伸縮項目總是沿著主軸，從主軸開始位置到主軸結束位置進行排版，flexbox在瀏覽器使用需要加上各個瀏覽器的私有前綴,-webkit ,-moz,-ms,-o，微信小程序全部去掉前綴。

伸縮容器支持的屬性有：

1,display

2,flex-direction

3,flex-wrap

4,flex-flow

5,justify-content

6,align-items

7,align-content

8,order

9,flex-grow

10,flex-basis

11,flex

12,align-self

主要介紹這幾個屬性

 display

該屬性用來指定元素是否為伸縮容器，語法為

display:flex    |   display:inline-flex

wxml代碼為:

  1
  2
  3
  4
  5
  6
  7
  8
  9

wxss代碼為

.container{
display: flex;
}

flex:用于產生塊級伸縮容器

.container{
display: inline-flex;
}

inline-flex:用于產生行內級伸縮容器，

flex-direction

該屬性用于指定主軸方向，語法為

flex-direction: row  | row-reverse  | column  | column-reverse

1)row水平方向從左向右

2)row-reverse水平方向從右向左

4）column伸縮容器為垂直方向，伸縮項目的排版方式為從上到下

5)column-reverse伸縮容器為垂直，伸縮項目為從下到上

flex-wrap

該屬性用來指定伸縮容器的主軸線方向空間不足的情況下，是否換行以及該如何換行

flex-wrap: nowrap | wrap  | wrap-reverse 

1)nowrap空間不足是也不換行

2)wrap空間不足可以換行

3) wrap-reverse空間不足可以換行，若主軸為水平軸，則換行的方向為從下到上，和wrap相反

flex-flow

該屬性是flex-direction和flex-wrap屬性的縮寫版本，它同時指定了伸縮容器的主軸和側軸，其默認屬性為row nowrap

flex-flow: flex-direction | flex-wrap

justify-content

該屬性用來定義伸縮項目沿主軸線的對齊方式

justify-content: flex-start | flex-end | center | space-between | space-around

1)flex-start伸縮項目向主軸線的起始位置靠齊

2)flex-end 伸縮項目向主軸線的結束位置對齊，

3)center伸縮項目向主軸線的中間位置靠齊

4)space-around伸縮項目會平均的分布在主軸線里，兩端保留一半的空間。

5)space-between伸縮項目會平分在主軸線里，第一個伸縮項目在主軸線的開始位置，最后一個伸縮項目在主軸線的終點位置

align-items

該屬性用來定義伸縮項目在伸縮容器的交叉軸上的對齊方式

align-items: flex-start | flex-end | center | baseline |  stretch;

1)flex-start伸縮項目沿交叉軸的起始位置對齊

2)flex-end沿交叉軸的結束位置對齊

3)center伸縮項目沿交叉軸的中間位置靠齊

4)baseline伸縮項目根據它們的基線對齊

5)stretch伸縮項目在交叉軸方向拉伸填充整個伸縮容器

align-content

用來調整伸縮項目出現換行后在交叉軸上的對齊方式，類似于伸縮項目在主軸上使用justify-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch

1)flex-start伸縮項目向交叉的起始位置靠齊

2)flex-end伸縮項目向交叉軸的起始位置靠齊

3)center伸縮項目向交叉軸的中間位置靠齊

4)space-between伸縮項目在交叉軸中平均分布

5)space-around伸縮項目在交叉軸平均分布，且兩邊各有一半空間

6)strech伸縮項目將會在交叉軸上伸展以占用剩余空間

order

flex-grow

flex-shrink

flex-basis

flex

align-self