這篇文章將為大家詳細(xì)講解有關(guān)微信開發(fā)中Flex布局的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供瀘州企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、html5、小程序制作等業(yè)務(wù)。10年已為瀘州眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

微信小程序頁面布局方式采用的是Flex布局。
Flex布局，是W3c在2009年提出的一種新的方案，可以簡便，完整，響應(yīng)式的實(shí)現(xiàn)各種頁面布局。
Flex布局提供了元素在容器中的對(duì)齊，方向以及順序，甚至他們可以是動(dòng)態(tài)的或者不確定的大小的。
Flex布局的主要特征是能夠調(diào)整其子元素在不同的屏幕大小中能夠用最適合的方法填充合適的空間。

flex布局

Flex布局的特點(diǎn):

• 任意方向的伸縮，向左，向右，向下，向上

• 在樣式層可以調(diào)換和重排順序

• 主軸和側(cè)軸方便配置

• 子元素的空間拉伸和填充

• 沿著容器對(duì)齊

微信小程序?qū)崿F(xiàn)了Flex布局,簡單介紹下Flex布局在微信小程序中的使用。

伸縮容器

設(shè)有display:flex或者display:block的元素就是一個(gè)flex container(伸縮容器)，里面的子元素稱為flex item(伸縮項(xiàng)目)，flex container中子元素都是使用Flex布局排版。

• display:block 指定為塊內(nèi)容器模式，總是使用新行開始顯示，微信小程序的視圖容器(view,scroll-view和swiper)默認(rèn)都是dispaly:block。

• display:flex:指定為行內(nèi)容器模式，在一行內(nèi)顯示子元素，可以使用flex-wrap屬性指定其是否換行，flex-wrap有三個(gè)值:nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下面)
  使用display:block(默認(rèn)值)的代碼:

  <view class="flex-row" style="display: block;">
        <view class="flex-view-item">1</view>
        <view class="flex-view-item">2</view>
        <view class="flex-view-item">3</view>
    </view>

  顯示效果:

block

改換成display:flex的顯示效果:

flex

可以從效果圖看到block和flex的區(qū)別，子元素view是在換行顯示(block)還是行內(nèi)顯示(flex)。

主軸和側(cè)軸

Flex布局的伸縮容器可以使用任何方向進(jìn)行布局。
容器默認(rèn)有兩個(gè)軸：主軸(main axis)和側(cè)軸(cross axis)。
主軸的開始位置為主軸起點(diǎn)(main start)，主軸的結(jié)束位置為主軸終點(diǎn)(main end),而主軸的長度為主軸長度(main size)。
同理側(cè)軸的起點(diǎn)為側(cè)軸起點(diǎn)(cross start),結(jié)束位置為側(cè)軸終點(diǎn)(cross end),長度為側(cè)軸長度(cross size)。詳情見下圖:

Flex-direction

注意，主軸并不是一定是從左到右的，同理側(cè)軸也不一定是從上到下，主軸的方向使用flex-direction屬性控制,它有4個(gè)可選值:

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

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

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

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

如果水平方向?yàn)橹鬏S，那個(gè)垂直方向就是側(cè)軸，反之亦然。
四種主軸方向設(shè)置的效果圖:

示例圖

圖中的實(shí)例展示了使用了不同的flex-direction值排列方向的區(qū)別。
實(shí)例代碼:

<view >
    <view class="flex-row" style="display: flex;flex-direction: row;">
        <view class="flex-view-item">1</view>
        <view class="flex-view-item">2</view>
        <view class="flex-view-item">3</view>
    </view>
    <view class="flex-column" style="display:flex;flex-direction: column;" >
        <view class="flex-view-item">c1</view>
        <view class="flex-view-item">c2</view>
        <view class="flex-view-item">c3</view>
    </view>
</view>

運(yùn)行效果：

flex-direction

對(duì)齊方式

子元素有兩種對(duì)齊方式：

justify-conent 定義子元素在主軸上面的對(duì)齊方式
align-items 定義子元素在側(cè)軸上對(duì)齊的方式

justify-content有5個(gè)可選的對(duì)齊方式:

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

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

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

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

• space-around 每個(gè)子元素之間的距離相等，兩端的子元素距離容器的距離也和其它子元素之間的距離相同。
  justify-content的對(duì)齊方式和主軸的方向有關(guān)，下圖以flex-direction為row，主軸方式是從左到右,描述jstify-content5個(gè)值的顯示效果:

  

  justify-content

align-items表示側(cè)軸上的對(duì)齊方式:

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

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

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

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

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

align-tiems設(shè)置的對(duì)齊方式，和側(cè)軸的方向有關(guān)，下圖以flex-direction為row,側(cè)軸方向是從上到下,描述align-items的5個(gè)值顯示效果:

aign-items

有了主軸和側(cè)軸的方向再加上設(shè)置他們的對(duì)齊方式，就可以實(shí)現(xiàn)大部分的頁面布局了。

關(guān)于“微信開發(fā)中Flex布局的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

本文標(biāo)題：微信開發(fā)中Flex布局的示例分析
本文網(wǎng)址：http://jinyejixie.com/article40/peoeho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、虛擬主機(jī)、ChatGPT、微信小程序、自適應(yīng)網(wǎng)站、定制網(wǎng)站

廣告

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