商城系統(tǒng) 注冊

微信小程序 View:flex 布局教程

2018-06-25|HiShop
導(dǎo)讀:微信小程序 View 支持兩種布局方式:Block 和 Flex,所有 View 默認都是 block,下面就來介紹下微信小程序的 Flex 布局...

微信小程序 View 支持兩種布局方式:Block 和 Flex,所有 View 默認都是 block

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

display:flex;

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

微信小程序 View: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;
}

然后大概是這個樣子的:

snip_20170213230726

然后我們先都加上display: flex

然后大概是這個樣子的:

微信小程序 View:flex 布局教程

然后我們先都加上 display: flex

好使用 flex 布局,主意,貌似 view 不會自動繼承,需要在每個想使用的 view 里都加上。

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

row:從左到右的水平方向為主軸

row-reverse:從右到左的水平方向為主軸

column:從上到下的垂直方向為主軸

column-reverse:從下到上的垂直方向為主軸

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

row:

微信小程序 View:flex 布局教程

row-reverse:

微信小程序 View:flex 布局教程

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

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

flex-end:主軸結(jié)束點對齊

微信小程序 View:flex 布局教程

center:在主軸中居中對齊

微信小程序 View:flex 布局教程

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

微信小程序 View:flex 布局教程

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

微信小程序 View:flex 布局教程

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

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

微信小程序 View:flex 布局教程

flex-start 側(cè)軸的起點對齊 (這里我們手動設(shè)置下子 view 的高度,來看的明顯一些)

微信小程序 View:flex 布局教程

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

微信小程序 View:flex 布局教程

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

微信小程序 View:flex 布局教程

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

微信小程序 View:flex 布局教程

子 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;

就成了這個樣子:

微信小程序 View:flex 布局教程

此外還有 flex-wrap 屬性,用于控制子 View 是否換行,有3個值可選:

nowrap:不換行(默認)

wrap:換行

wrap-reverse:換行,第一行在最下面

還有子 View 有個 order 屬性,可以控制子元素的排列順序,默認為0。

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

微信小程序 View:flex 布局教程

flex 常用布局就這些。

電話咨詢 預(yù)約演示 0元開店