對于一個后端程序員來說最麻煩的就是布局了，今天就介紹下小程序的布局，介紹一種高效的小程序布局方案。筆者之前也做過native app的布局，對比下來，小程序的布局沒有native那么靈活，畢竟google和apple在布局方面都提供了多套布局，用于實現各種花哨的app布局，但是小程序在布局方面也有優勢，那就是兼容性的優勢，小程序自定義了頁面像素單位rpx，小程序會將所有手機的寬度都定義為750rpx，這樣UI在切圖的時候只要按照2X圖來切就可以了，小程序會自動根據當前運行手機進行縮放處理，不用像原來native開發那樣做多套適配。
剛開始接觸小程序布局的時候是有點懵的，看了文檔沒找到native中常見的容器組件，后來參考了一些文章發現可疑使用css3中的flex進行布局，看了flex的文檔后，發現flex就類似于原生開發中的相對布局，連很多關鍵字都是一樣的，使用起來也較為簡單，本篇就總結下flex布局的使用。
flex布局介紹
flex布局對于原生開發的同學可以理解為一個相對容器布局，里面可以放很多組件也可以嵌套容器布局。
flex布局一共有6個屬性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
下面我們分別對這6個屬性做個介紹，讓大家知道如何使用。
1）flex-direction：很好理解就是定義容器中所有組件的排列方向，排列方向的話有4種row， row-reverse， column， column-reverse，但常用的基本就是row和column這兩種了，其它兩種逆向排序目前沒發現能用在什么樣的布局上。默認值為row。
2）flex-wrap：定義了容器內組件在一條軸線排不下，如何換行。換行方式有3種 nowrap（不換行）， wrap（換行）， wrap-reverse（逆向換行），默認值為nowrap，當然我們常用的也是前兩種，第三種逆向換行，我也是沒想到這種詭異的換行方式能用在哪種布局上。
3）flex-flow：flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap，筆者個人還是喜歡將兩者分開定義。
4）justify-content: 定義了項目在主軸上的對齊方式，這也是flex比原先的h5布局要強的地方，原先的h5布局要實現各種對齊還是比較麻煩的。
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等，所以，項目之間的間隔比項目與邊框的間隔大一倍。個人覺得這種布局使用場景也比較少。
5）align-items：定義項目在交叉軸上如何對齊。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
6）align-content：定義了多軸線的對齊方式，總的來說用的比較少，這里就不介紹了。
flex布局在小程序中使用實例
上面是flex實例在小程序上的效果截圖，通過flex布局，基本能夠滿足我們常見的大部分小程序布局，把代碼直接放到了github上，大家自行查看，寫幾個例子就能快速上手flex布局。
github: https://github.com/feiweiwei/wxapp-guide.git
上面只是flex的基本用法，但是在實際開發過程中不可能是什么簡單的布局，下面我們再實戰一下，flex布局嵌套，下面我們實現下下面這個布局效果。
這里我就不一步步介紹如何實現了，大家看了代碼就能夠秒懂了，flex嵌套和任何一種容器布局嵌套是一樣的，直接看css和wxml代碼, 這里給大家一個建議就是長寬盡量都在父容器定義好，在子組件里長寬自適應這樣會比較容易，為了方便開發在開發過程中可以在每個組件的css里加上border，方便查看哪里存在問題。
/* pages/bus/bus.wxss */
.bus-box {
background-color: white;
width: 750rpx;
margin-top: 0rpx;
}
.bus-info-box {
display: flex;
flex-direction: row;
width: 750rpx;
height: 90rpx;
margin-top: 0rpx;
background: #fff;
border-bottom: #eee solid 1px;
}
.bus-info-box .bus-info-stop-box {
display: flex;
flex-direction: column;
width: 675rpx;
margin-top: 0rpx;
}
.bus-info-stop-box .stop-name-text {
height: 37rpx;
padding-left: 21rpx;
padding-top: 12rpx;
font-size: 26rpx;
font-family: PingFangSC-Light;
color: rgba(0, 0, 0, 1);
}
.bus-info-stop-box .stop-time-box {
display: flex;
flex-direction: row;
height: 53rpx;
width: 675rpx;
}
.stop-time-box .stop-time-first-text {
width: 120rpx;
padding-left: 20rpx;
font-size: 22rpx;
font-family: PingFangSC-Light;
color: rgba(246, 180, 3, 1);
}
.stop-time-box .stop-time-last-text {
width: 120rpx;
font-size: 22rpx;
font-family: PingFangSC-Light;
color: rgba(253, 89, 51, 1);
}
.bus-info-box .exchange-image {
width: 38rpx;
height: 38rpx;
margin-right: 35rpx;
margin-top: 26rpx;
}
.bus-actual-info {
display: flex;
flex-direction: row;
width: 750rpx;
height: 90rpx;
align-items: center;
border-bottom: #eee solid 1px;
}
.bus-actual-info .bus-actual-info-time {
width: 640rpx;
padding-left: 20rpx;
font-size: 28rpx;
font-family: PingFangSC-Light;
color: rgba(0, 0, 0, 1);
}
.bus-actual-info .bus-actual-info-stops {
font-size: 28rpx;
font-family: PingFangSC-Light;
color: rgba(255, 106, 6, 1);
}
.stop-list-item {
display: flex;
flex-direction: row;
width: 750rpx;
height: 90rpx;
border-bottom: #eee solid 1px;
align-items: center;
}
.stop-list-item .stop-item-image {
width: 22rpx;
height: 90rpx;
margin-left: 41rpx;
}
.stop-list-item .stop-item-name {
width: 580rpx;
padding-left: 20rpx;
font-size: 26rpx;
font-family: PingFangSC-Light;
color: rgba(138, 135, 134, 1);
}
.stop-list-item .stop-item-favor-image {
width: 40rpx;
height: 40rpx;
}
<!--pages/bus/bus.wxml-->
<view class="bus-box">
<view class="bus-info-box">
<view class="bus-info-stop-box">
<view class="stop-name-text">施新路施灣二路 —— 金橋地鐵站</view>
<view class="stop-time-box">
<view class="stop-time-first-text">首：04:15</view>
<view class="stop-time-last-text">末：19:30</view>
</view>
</view>
<image class="exchange-image" src="../../images/diaozhuan@2x.png"></image>
</view>
<view class="bus-actual-info">
<view class="bus-actual-info-time">滬A-01302D還有10分鐘到站</view>
<view class="bus-actual-info-stops">5站</view>
</view>
<view class="stop-list-item" wx:for="{{stopList}}">
<image class="stop-item-image" src="../../images/zhou@2x.png"></image>
<view class="stop-item-name">{{item.stopId}}{{item.stopName}}</view>
<image class="stop-item-favor-image" src="../../images/shoucang@2x.png"></image>
</view>
</view>
源碼github: https://github.com/feiweiwei/wxapp-guide.git
總結
上面詳細介紹了下flex布局在小程序中如何使用，看完如果還迷惑的可以從github上把代碼clone下來運行下就知道怎么回事了，希望文章對大家有幫助。
