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

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

/* wxml */
<view class="classname">
    <text>測試用小玩意兒</text>
</view>

/* wxss */
view{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

將align-items改成justify-content

/* wxml */
<view class="classname">
<text>測試用小玩意兒</text>
</view>

/* wxss */
view{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}

兩個屬性一起來

 常用場景不止居中布局，還有很多，但一講起來篇幅難免太長，這里用文字帶過，不懂可以留言問我，或者度娘/Google（推薦看阮一峰的教程）

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

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