?微信小程序 View 支持兩種布局方式：Block 和 Flex
所有 View 默認都是 block
要使用 flex 布局的話需要顯式的聲明：
display:flex;
下面就來介紹下微信小程序的 Flex 布局
1.先做一個簡單的 demo
<view class="main">
<view class="item item1">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
</view>
2.加上背景色能看的更清楚些
.main{
width:100%;
background-color:antiquewhite;
}
.item{
height:100rpx;
width:100rpx;
}
.item1{
background-color:red;
}
.item2{
background-color:dodgerblue;
}
.item3{
background-color:greenyellow;
}
然后我們先都加上? display: flex
好使用 flex 布局，主意，貌似 view 不會自動繼承，需要在每個想使用的 view 里都加上。
首先是橫向布局和豎向布局，要設置屬性 flex-direction ,它有4個可選值：
row：從左到右的水平方向為主軸
row-reverse：從右到左的水平方向為主軸
column：從上到下的垂直方向為主軸
column-reverse：從下到上的垂直方向為主軸
我們來看下設置 row 和 row-reverse 的區別：
然后我們要設置元素在橫向上的布局方向，需要設置 justify-content 屬性，它有5個值可選：
然后我們要設置元素在縱向上的布局方向，需要設置 align-items 屬性，它有5個值可選：
子 View 還有個屬性 align-self，可以覆蓋父元素的 align-items 屬性，它有6個值可選：auto | flex-start | flex-end | center | baseline | stretch （auto 為繼承父元素 align-items 屬性，其他和 align-items 一致）
比如上面最后一個 baseline 的例子，我們把 item3 設置 align-self:flex-end;
就成了這個樣子：
此外還有 flex-wrap 屬性，用于控制子 View 是否換行，有3個值可選：
nowrap：不換行（默認）
wrap：換行
wrap-reverse：換行，第一行在最下面
還有子 View 有個 order 屬性，可以控制子元素的排列順序，默認為0。
比如還是上面那個例子，我們把 item3 設置 order:-1; 可以把 item3 排在前面
flex 常用布局就這些
