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

默認(rèn)情況下，伸縮容器由兩根軸組成，主軸(main)和交叉軸(cross)，其中主軸的開始位置叫main start，結(jié)束位置叫main end。交叉軸的開始位置叫cross start，結(jié)束位置叫cross end 。伸縮項(xiàng)目的主軸上的占據(jù)空間叫main axis，在交叉軸上的占據(jù)位置叫cross axis，根據(jù)設(shè)置情況的不同。主軸既可以是水平軸，也可以是垂直軸。不論哪個(gè)軸作為主軸，默認(rèn)情況下伸縮項(xiàng)目總是沿著主軸，從主軸開始位置到主軸結(jié)束位置進(jìn)行排版，flexbox在瀏覽器使用需要加上各個(gè)瀏覽器的私有前綴,-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

主要介紹這幾個(gè)屬性

 display

該屬性用來(lái)指定元素是否為伸縮容器，語(yǔ)法為

display:flex    |   display:inline-flex

wxml代碼為:

  1
  2
  3
  4
  5
  6
  7
  8
  9

wxss代碼為

.container{
display: flex;
}

flex:用于產(chǎn)生塊級(jí)伸縮容器

.container{
display: inline-flex;
}

inline-flex:用于產(chǎn)生行內(nèi)級(jí)伸縮容器，

flex-direction

該屬性用于指定主軸方向，語(yǔ)法為

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

1)row水平方向從左向右

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

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

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

flex-wrap

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

flex-wrap: nowrap | wrap  | wrap-reverse 

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

2)wrap空間不足可以換行

3) wrap-reverse空間不足可以換行，若主軸為水平軸，則換行的方向?yàn)閺南碌缴希蛍rap相反

flex-flow

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

flex-flow: flex-direction | flex-wrap

justify-content

該屬性用來(lái)定義伸縮項(xiàng)目沿主軸線的對(duì)齊方式

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

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

2)flex-end 伸縮項(xiàng)目向主軸線的結(jié)束位置對(duì)齊，

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

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

5)space-between伸縮項(xiàng)目會(huì)平分在主軸線里，第一個(gè)伸縮項(xiàng)目在主軸線的開始位置，最后一個(gè)伸縮項(xiàng)目在主軸線的終點(diǎn)位置

align-items

該屬性用來(lái)定義伸縮項(xiàng)目在伸縮容器的交叉軸上的對(duì)齊方式

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

1)flex-start伸縮項(xiàng)目沿交叉軸的起始位置對(duì)齊

2)flex-end沿交叉軸的結(jié)束位置對(duì)齊

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

4)baseline伸縮項(xiàng)目根據(jù)它們的基線對(duì)齊

5)stretch伸縮項(xiàng)目在交叉軸方向拉伸填充整個(gè)伸縮容器

align-content

用來(lái)調(diào)整伸縮項(xiàng)目出現(xiàn)換行后在交叉軸上的對(duì)齊方式，類似于伸縮項(xiàng)目在主軸上使用justify-content

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

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

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

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

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

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

6)strech伸縮項(xiàng)目將會(huì)在交叉軸上伸展以占用剩余空間

order

flex-grow

flex-shrink

flex-basis

flex

align-self