微信小程序 View 支持兩種布局方式：Block 和 Flex，所有 View 默認都是 block浮動布局久窟，要使用 flex 布局的話需要顯式的聲明：
display:flex;
概述
1.Flex容器屬性
-
flex-direction決定元素的排列方向 -
flex-wrap決定元素如何換行 -
flex-flow flex-direction和flex-wrap的簡寫 -
justify-content元素在主軸上的對齊方式 -
align-items元素在交叉軸的對齊方式
2.Flex容器內(nèi)元素屬性
-
flex-grow當有多余空間時，元素的放大比例 -
flex-shrink當空間不足時笑旺，元素的縮小比例 -
flex-basis元素在主軸上占據(jù)的空間 -
flex是grow貌虾、shrink 锐借、basis的簡寫 -
order定義元素的排列順序 -
align-self定義元素自身的對齊方式
寫一個簡單Demo
wxml：
<view class=“main”>
<view class="item item1">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
</view>
wxss:
.main { width: 100%; background-color: antiquewhite;}
.item { height: 100rpx; width: 100rpx;}
.item1 { background-color: red;}
.item2 { background-color: dodgerblue;}
.item3 { background-color: greenyellow;}
效果：
備注：誰要要使用flex布局该押，就得在樣式里加上
display: flex
flex-direction
首先是橫向布局和豎向布局疗杉，要設(shè)置屬性 flex-direction ,它有4個可選值：
-
flex-direction: row：從左到右的水平方向為主軸 -
flex-direction: row-reverse：從右到左的水平方向為主軸 -
flex-direction: column：從上到下的垂直方向為主軸 -
flex-direction: column-reverse：從下到上的垂直方向為主軸
我們來看下設(shè)置 row 和 row-reverse 的區(qū)別：
justify-content
然后我們要設(shè)置元素在橫向上的布局方向，需要設(shè)置 justify-content 屬性蚕礼，它有5個值可選：
-
flex-start：主軸起點對齊(默認值)
flex-start -
flex-end：主軸結(jié)束點對齊
flex-end -
center：在主軸中居中對齊
center -
space-between：兩端對齊烟具，除了兩端的子元素分別靠向兩端的容器之外，其他子元素之間的間隔都相等
space-between -
space-around：每個子元素之間的距離相等奠蹬，兩端的子元素距離容器的距離也和其它子元素之間的距離相同
space-around
align-items
我們要設(shè)置元素在縱向上的布局方向朝聋，需要設(shè)置 align-items 屬性，它有5個值可選：
-
stretch 填充整個容器(默認值)
stretch -
flex-start 側(cè)軸的起點對齊 （這里我們手動設(shè)置下子 view 的高度罩润，來看的明顯一些）
flex-start -
flex-end 側(cè)軸的終點對齊
flex-end -
center 在側(cè)軸中居中對齊
center -
baseline 以子元素的第一行文字對齊
baseline
align-self
子 View 還有個屬性 align-self，可以覆蓋父元素的 align-items 屬性翼馆，它有6個值可選：auto | flex-start | flex-end | center | baseline | stretch （auto 為繼承父元素 align-items 屬性割以，其他和 align-items 一致）
比如上面最后一個 baseline 的例子金度，我們把 item3 設(shè)置 align-self:flex-end;
就成了這個樣子：
flex-wrap
此外還有 flex-wrap 屬性，用于控制子 View 是否換行严沥，有3個值可選：
- nowrap：不換行（默認）
- wrap：換行
- wrap-reverse：換行猜极，第一行在最下面
order
子 View 有個 order 屬性，可以控制子元素的排列順序消玄，默認為0跟伏。
比如還是上面那個例子，我們把 item3 設(shè)置 order:-1; 可以把 item3 排在前面
flex-grow
layout.wxss中修改代碼如下：在item1中增加： flex-grow: 1翩瓜，在item3中增加： flex-grow: 2受扳，表示在一行中如果有剩余空間的話，item3之外的子view占1份空間兔跌，而item3子view占2份空間(可以理解為剩余空間item3最多可以占2份空間)勘高。
flex-shrink
layout.wxss中再增加4個子view并修改代碼如下：i3的flex-shrink為0（ flex-shrink: 0），其余子view為1（ flex-shrink: 1）坟桅，這表示當空間不足時所有子view都等比縮小华望，但是i3的view保持大小不變，編譯運行仅乓，效果如圖11所示
flex-basis
layout.wxss中修改代碼如下：其他代碼保持不變不變赖舟，編譯運行，效果如圖12所示
.i3{
flex-shrink: 0;
flex-basis: 200rpx
}
flex
flex是grow夸楣，shink宾抓，basis幾個屬性的合并，layout.wxss中修改代碼如下：其他代碼保持不變不變裕偿，編譯運行洞慎，效果和圖12保持一樣
.i3{
flex:0 0 200rpx
}
flex-flow
flex-flow: wrap row，編譯運行結(jié)果：如圖5所示嘿棘，flex-flow相當于 flex-direction和flex-wrap兩個屬性的組合
----------flex 常用布局就這些—————
