編寫頁面是微信小程序乃至前端中最重要的環節之一。如何簡單的實現常見的佈局排布(水平居中、垂直居中、左對齊、右對齊、等距分佈等等)呢？話不多說，開始搞
一、講一講display
display 屬性規定元素應該生成的框的類型。
我的理解呢，就是佈局的顯示類型，或者說是佈局的顯示方式，比如說：display:none; 就表示此元素不顯示，以及今天要講的：display:flex;表示此元素的佈局是以彈性佈局來展示，Flexible Box的縮寫爲Flex。那麼究竟啥是flex佈局呢
二、flex介紹
2009年，W3C 提出了一種新的方案----Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支持，這意味着，現在就能很安全地使用這項功能。
使用flex佈局，應該培養的一個概念就是：把佈局或者元素當成一個容器，或者說是盒子，元素在盒子裏進行各種位置排布
比如上圖，元素view1、view2、view3都是在盒子page（它們的父佈局）中進行佈局排布的
三、使用flex
首先，我們先在小程序中創建一個空頁面，然後在index.wxml中寫入
<view class='container1'>
<view class='view1'>view1</view>
<view class='view2'>view2</view>
<view class='view3'>view3</view>
</view>
index.wxss
.container1{
width: 100%;
height: 900rpx;
background: #999999;
}
.view1{
height: 200rpx;
background: #E21918
}
.view2{
height: 200rpx;
background: #FFAA25
}
.view3{
height: 200rpx;
background: #1BA160
}
當我們在container佈局中不寫display時，默認display爲block，是塊級元素，此時一個元素（子view）佔一行，即使子view的寬度沒有指定，也是佔一行如下圖效果
當我們將display設爲flex時
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
}
我們發現flex會讓塊級元素的特性失效，一個元素不會佔一行了。
好了，我們發現當display設置爲flex，佈局盒子默認的樣子是子元素左對齊，排成一行。那如果想讓子元素豎着排成一列，該怎麼實現呢？
我們可以在子元素的父佈局設置flex-direction,當我們設置flex-direction:column時，子元素是列排布，設置flex-direction:row時，子元素是行排布，代碼以及效果如下
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column
}
當我們用開發工具敲lex-direction:column時，會出現一個代碼提示（一定用鍵盤敲纔會出現，複製不會提示）
除了column還有一個column-reverse，那這個column-reverse有何用那？它其實是對子元素進行了倒序排列，代碼和效果如下：
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column-reverse
}
這時，我們會發現一個問題，順序是倒序不假，但是view1、view2、view3的位置也變化了，原來是頂部對齊，設置 flex-direction: column-reverse後，變成了底部對齊。
沒關係，我們可以通過設置子元素父佈局裏的justify-content來控制子元素是上對齊還是下對齊（當flex-direction:row時，justify-content控制的時左對齊和右對齊）
當我們把justify-content設置爲flex-end時，代碼和效果如下
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end
}
我們發現子view也上對齊了，也倒序了。當我們設置justify-content: flex-starts後，就會出現下對其的效果，這裏我就不貼圖了。
那我們如何實現view1、view2、view3在其父佈局盒子中垂直居中顯示呢？
我們可以設置justify-content:center，代碼和效果如下：
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column-reverse;
justify-content: center
}
justify-content還有兩個常用的取值：分別是 space-around喝space-between，我們先看一下space-arround的效果：
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column;
justify-content: space-around
}
由上圖可以看到，space-around的效果是子元素兩側的邊距平分了父容器中剩餘的寬度，使得子元素兩側的邊距均相等。
那我們再看space-between是什麼樣子展現的：
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column;
justify-content: space-between
}
由上圖可以看出，space-between實現了等距排布，第一個元素上對齊，最後一個元素下對齊，間距平分。
ok，至此主軸方向常用的佈局方式已經介紹完畢，那問題來了，什麼是主軸？
flex容器默認存在兩個軸，一個主軸，一個交叉軸，隨是主軸是由flex-direction決定的，flex-direction爲row的時候，橫向是主軸，縱向是交叉軸；flex-direction爲column的時候，縱向爲主軸，橫向爲交叉軸。
那麼，交叉軸方向的常用佈局有哪些，通過什麼來設置呢？
可以通過align-items來設置交叉軸方向的佈局，以下講一下它幾個常用的取值
center、flex-start、flex-end和baseline
center、flex-start、flex-end這幾個取值上面都說過，來舉一個例子看一下justify-content和align-item同時使用的效果：
水平垂直居中效果：
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column;
justify-content:center;
align-items: center
}
justify-content和align-items的組合還有好多種，這裏就不舉例子了，但是值得注意的是：align-items沒有space-between和space-around。
最後說以下align-items的baseline的用法，先看wxss，注意看view1、view2和view3的font-size：
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: row;
justify-content:center;
align-items: baseline
}
.view1{
height: 200rpx;
font-size: 20rpx;
background: #E21918
}
.view2{
height: 200rpx;
font-size: 30rpx;
background: #FFAA25
}
.view3{
height: 200rpx;
font-size: 60rpx;
background: #1BA160
}
我們可以看出，view1、view2、view3文字大小不同，但是文字底部對齊了。所以，baseline的作用就是：使view內的每個子元素的文字底部對齊。
四、總結
以上內容主要是簡單的介紹了以下對flex佈局的一些理解，以及flex的常見用法，熟練掌握這些用法後，可以編寫大部分常見的微信小程序頁面。以上內容可能會有遺漏，我會在以後進行更新完善。