小程序的居中佈局，你能夠這樣作

 

 

前段時間小程序上線後就棄坑了，回到網頁開發去了，最近又有新項目，再次入坑，不免須要一些demo來從新熟悉，在這個過程當中，發現demo中不多有人使用flex佈局，今天給大夥稍微講一下這個佈局。 
flex佈局有啥用呢，最大的做用即是快速實現你所須要的佈局（水平居中、垂直居中、左右對齊等） 
flex佈局的使用很是簡單，在這我將幾個經常使用的場景，其餘更深刻的能夠去查資料瞭解（我纔不會說是由於我懶）

首先是對佈局容器設置display:flex; 
而後你就能夠盡情利用兩個屬性（justify-content（水平方向）和align-items（垂直方向））進行放縱了 
例如衆所周知最蛋疼的垂直居中

/* 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（水平軸線，默認） column（垂直軸線） //這裏講的是比較經常使用的佈局 
（軸線舉例：父級元素使用flex佈局，默認佈局下塊級元素是會換行的，但設置了flex佈局後默認就都水平排列了） 
justify-content: flex-start（居於軸線的開頭） center（居於軸線的中間） flex-end（居於軸線的末端） space-around（將子元素按比例排列在軸線上） space-between（將子元素排列在軸線兩端） 
align-items: 同justify-content 
flex-wrap（規定子元素溢出處理）: nowrap（不換行） wrap（順序換行） wrap-reverse（逆序換行）

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