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

所有 View 默認(rèn)都是 block

要使用 flex 布局的話需要顯式的聲明：

display:flex;

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

1.先做一個(gè)簡單的 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 不會(huì)自動(dòng)繼承，需要在每個(gè)想使用的 view 里都加上。

首先是橫向布局和豎向布局，要設(shè)置屬性 flex-direction ,它有4個(gè)可選值：

row：從左到右的水平方向?yàn)橹鬏S

row-reverse：從右到左的水平方向?yàn)橹鬏S

column：從上到下的垂直方向?yàn)橹鬏S

column-reverse：從下到上的垂直方向?yàn)橹鬏S

我們來看下設(shè)置 row 和 row-reverse 的區(qū)別：

row

row-reverse：

然后我們要設(shè)置元素在橫向上的布局方向，需要設(shè)置 justify-content 屬性，它有5個(gè)值可選：

flex-start：主軸起點(diǎn)對齊(默認(rèn)值)

flex-end：主軸結(jié)束點(diǎn)對齊

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

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

center：在主軸中居中對齊

然后我們要設(shè)置元素在縱向上的布局方向，需要設(shè)置 align-items 屬性，它有5個(gè)值可選：

stretch 填充整個(gè)容器(默認(rèn)值)

flex-start 側(cè)軸的起點(diǎn)對齊 （這里我們手動(dòng)設(shè)置下子 view 的高度，來看的明顯一些）

flex-end 側(cè)軸的終點(diǎn)對齊

center 在側(cè)軸中居中對齊

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

子 View 還有個(gè)屬性 align-self，可以覆蓋父元素的 align-items 屬性，它有6個(gè)值可選：auto | flex-start | flex-end | center | baseline | stretch （auto 為繼承父元素 align-items 屬性，其他和 align-items 一致）

比如上面最后一個(gè) baseline 的例子，我們把 item3 設(shè)置 align-self:flex-end;

就成了這個(gè)樣子：

此外還有 flex-wrap 屬性，用于控制子 View 是否換行，有3個(gè)值可選：

nowrap：不換行（默認(rèn)）

wrap：換行

wrap-reverse：換行，第一行在最下面

還有子 View 有個(gè) order 屬性，可以控制子元素的排列順序，默認(rèn)為0。

比如還是上面那個(gè)例子，我們把 item3 設(shè)置 order:-1; 可以把 item3 排在前面

flex 常用布局就這些