微信小程序 View：flex 佈局

微信小程序 View 支持兩種佈局方式：Block 和 Flex

全部 View 默認都是 block

要使用 flex 佈局的話須要顯式的聲明：

display:flex;

 

下面就來介紹下微信小程序的 Flex 佈局

先作一個簡單的 demo

  <view class="main">
    <view class="item item1">1</view>
    <view class="item item2">2</view>
    <view class="item item3">3</view>
  </view>

加上背景色能看的更清楚些

.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 的區別：

row：

 

row-reverse：

 

 

而後咱們要設置元素在橫向上的佈局方向，須要設置 justify-content 屬性，它有5個值可選：

• flex-start：主軸起點對齊(默認值)

• flex-end：主軸結束點對齊

• center：在主軸中居中對齊

• space-between：兩端對齊，除了兩端的子元素分別靠向兩端的容器以外，其餘子元素之間的間隔都相等

• space-around：每一個子元素之間的距離相等，兩端的子元素距離容器的距離也和其它子元素之間的距離相同

 

 

而後咱們要設置元素在縱向上的佈局方向，須要設置 align-items 屬性，它有5個值可選：

• stretch 填充整個容器(默認值)

• flex-start 側軸的起點對齊 （這裏咱們手動設置下子 view 的高度，來看的明顯一些）

• flex-end 側軸的終點對齊

• center 在側軸中居中對齊

• baseline 以子元素的第一行文字對齊

 

 

子 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 經常使用佈局就這些

寫微信小程序的能夠試試

 

最後，要是啥時候小程序能直接支持 bootstrap 就更好了…