微信小程序 View：flex 布局實(shí)例,元素,布局,屬性,可選,方向
微信小程序 View：flex 布局實(shí)例
易采站長(zhǎng)站，站長(zhǎng)之家為您整理了微信小程序 View：flex 布局實(shí)例的相關(guān)內(nèi)容。
微信小程序 View 支持兩種布局方式：Block 和 Flex
所有 View 默認(rèn)都是 block
要使用 flex 布局的話需要顯式的聲明：
display:flex;
下面就來(lái)介紹下微信小程序的 Flex 布局
先做一個(gè)簡(jiǎn)單的 demo
<view class="main">1 2 3
加上背景色能看的更清楚些
.main { width: 100%; background-color: antiquewhite;}.item { height: 100rpx; width: 100rpx;}.item1 { background-color: red;}.item2 { background-color: dodgerblue;}.item3 { background-color: greenyellow;}
然后大概是這個(gè)樣子的：
然后我們先都加上 : flex
好使用 flex 布局，主意微信小程序 flex布局，貌似 view 不會(huì)自動(dòng)繼承，需要在每個(gè)想使用的 view 里都加上。
首先是橫向布局和豎向布局，要設(shè)置屬性 flex- ,它有4個(gè)可選值：
row：從左到右的水平方向?yàn)橹鬏S
row-：從右到左的水平方向?yàn)橹鬏S
：從上到下的垂直方向?yàn)橹鬏S
-：從下到上的垂直方向?yàn)橹鬏S
我們來(lái)看下設(shè)置 row 和 row- 的區(qū)別：
row：
row-：
然后我們要設(shè)置元素在橫向上的布局方向，需要設(shè)置 - 屬性，它有5個(gè)值可選：
flex-start：主軸起點(diǎn)對(duì)齊(默認(rèn)值)
flex-end：主軸結(jié)束點(diǎn)對(duì)齊
：在主軸中居中對(duì)齊
space-：兩端對(duì)齊，除了兩端的子元素分別靠向兩端的容器之外，其他子元素之間的間隔都相等
space-：每個(gè)子元素之間的距離相等，兩端的子元素距離容器的距離也和其它子元素之間的距離相同
然后我們要設(shè)置元素在縱向上的布局方向，需要設(shè)置 align-items 屬性，它有5個(gè)值可選：
填充整個(gè)容器(默認(rèn)值)
flex-start 側(cè)軸的起點(diǎn)對(duì)齊 （這里我們手動(dòng)設(shè)置下子 view 的高度，來(lái)看的明顯一些）
flex-end 側(cè)軸的終點(diǎn)對(duì)齊
在側(cè)軸中居中對(duì)齊
以子元素的第一行文字對(duì)齊
子 View 還有個(gè)屬性 align-self，可以覆蓋父元素的 align-items 屬性，它有6個(gè)值可選：auto | flex-start | flex-end | | | （auto 為繼承父元素 align-items 屬性，其他和 align-items 一致）
比如上面最后一個(gè) 的例子，我們把 item3 設(shè)置 align-self:flex-end;
就成了這個(gè)樣子：
此外還有 flex-wrap 屬性，用于控制子 View 是否換行微信小程序 flex布局，有3個(gè)值可選：
：不換行（默認(rèn)）
wrap：換行
wrap-：換行，第一行在最下面
還有子 View 有個(gè) order 屬性，可以控制子元素的排列順序，默認(rèn)為0。
比如還是上面那個(gè)例子，我們把 item3 設(shè)置 order:-1; 可以把 item3 排在前面
flex 常用布局就這些
寫(xiě)微信小程序的可以試試
最后，要是啥時(shí)候小程序能直接支持 就更好了