這篇文章給大家分享的是有關(guān)微信小程序View中flex布局的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司是少有的網(wǎng)站建設(shè)、成都網(wǎng)站制作、營銷型企業(yè)網(wǎng)站、成都小程序開發(fā)、手機(jī)APP,開發(fā)、制作、設(shè)計(jì)、友情鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,2013年至今,堅(jiān)持透明化,價(jià)格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評(píng)

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

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

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

display:flex;

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

先做一個(gè)簡(jiǎn)單的 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;
}

然后大概是這個(gè)樣子的：

然后我們先都加上  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)對(duì)齊(默認(rèn)值)



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



• center：在主軸中居中對(duì)齊



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



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



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

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



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



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



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



• baseline 以子元素的第一行文字對(duì)齊



子 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 常用布局就這些

寫微信小程序的可以試試

最后，要是啥時(shí)候小程序能直接支持 bootstrap 就更好了

感謝各位的閱讀！關(guān)于“微信小程序View中flex布局的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前文章：微信小程序View中flex布局的示例分析-創(chuàng)新互聯(lián)
文章源于：http://www.chinadenli.net/article6/djdjog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)、Google、移動(dòng)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)