前段時(shí)間小程序上線后就棄坑了，回到網(wǎng)頁(yè)開(kāi)發(fā)去了，最近又有新項(xiàng)目，再次入坑，難免需要一些demo來(lái)重新熟悉，在這個(gè)過(guò)程中，發(fā)現(xiàn)demo中很少有人使用flex布局，今天給大伙稍微講一下這個(gè)布局。 
flex布局有啥用呢，最大的作用便是快速實(shí)現(xiàn)你所需要的布局（水平居中、垂直居中、左右對(duì)齊等） 
flex布局的使用非常簡(jiǎn)單，在這我將幾個(gè)常用的場(chǎng)景，其他更深入的可以去查資料了解（我才不會(huì)說(shuō)是因?yàn)槲覒校?/p>

首先是對(duì)布局容器設(shè)置display:flex; 
然后你就可以盡情利用兩個(gè)屬性（justify-content（水平方向）和align-items（垂直方向））進(jìn)行放縱了 
例如眾所周知最蛋疼的垂直居中

1. /* wxml */
2.  
3. <view class="classname">
4.  
5. <text>測(cè)試用小玩意兒</text>
6.  
7. </view>

1. /* wxss */
2.  
3. view{
4.  
5. width: 100%;
6.  
7. height: 100%;
8.  
9. display: flex;
10.  
11. align-items: center;
12.  
13. }

將align-items改成justify-content

1. /* wxml */
2.  
3. <view class="classname">
4.  
5. <text>測(cè)試用小玩意兒</text>
6.  
7. </view>

1. /* wxss */
2.  
3. view{
4.  
5. width: 100%;
6.  
7. height: 100%;
8.  
9. display: flex;
10.  
11. justify-content: center;
12.  
13. }

兩個(gè)屬性一起來(lái)

常用場(chǎng)景不止居中布局，還有很多，但一講起來(lái)篇幅難免太長(zhǎng)，這里用文字帶過(guò)，不懂可以留言問(wèn)我，或者度娘/Google（推薦看阮一峰的教程）

flex-direction（改變軸線方向）: row（水平軸線，默認(rèn)） column（垂直軸線） //這里講的是比較常用的布局  （軸線舉例：父級(jí)元素使用flex布局，默認(rèn)布局下塊級(jí)元素是會(huì)換行的，但設(shè)置了flex布局后默認(rèn)就都水平排列了）  justify-content: flex-start（居于軸線的開(kāi)頭） center（居于軸線的中間） flex-end（居于軸線的末端） space-around（將子元素按比例排列在軸線上） space-between（將子元素排列在軸線兩端）  align-items: 同justify-content  flex-wrap（規(guī)定子元素溢出處理）: nowrap（不換行） wrap（順序換行） wrap-reverse（逆序換行）

好像常用的大概就這些了，小程序?qū)lex的兼容性很好，推薦大家以后開(kāi)發(fā)的時(shí)候可以嘗試這個(gè)布局，非常使用，對(duì)提升開(kāi)發(fā)效率還是有非常大幫助的