首頁  >  文章  >  微信小程式  >  微信小程式Flex佈局

微信小程式Flex佈局

PHPz
PHPz原創
2017-04-04 11:54:041841瀏覽

微信小程式頁面佈局方式採用的是Flex佈局。 Flex佈局提供了元素在容器中的對齊,方向以及順序,甚至他們可以是動態的或不確定的大小的。最適合的方法填滿適當的空間。
##任意方向的伸縮,向左,向右,向下,向上
#在樣式層可以調換和重排順序

#主軸和側軸方便配置微信小程式Flex佈局

子元素的空間拉伸和填充


沿著容器對齊
  • 微信小程式實作了
  • Flex
  • 佈局,簡單介紹下

    Flex

    佈局在微信小程式中的使用。容器
  • 設有

    display
  • :flex
  • display:block

    的元素就是一個
  • flex container
  • (伸縮容器) ,裡面的子元素稱為

    flex item

    (伸縮項目),
  • flex container
中子元素都是使用

Flex佈局排版。 display:block

指定為區塊內容器模式,總是使用新行開始顯示,微信小程式的

檢視

容器(view,scroll-view和swiper )預設都是

dispaly:block。可以使用<a href="http://www.php.cn/wiki/927.html" target="_blank">flex-wrap</a>屬性指定其是否換行,flex-wrap有三個值:nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下面)#使用

display:block
    (預設值)的程式碼:
  • <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可以從效果圖看到blockflex
    的區別,子元素view是在換行顯示(

    block

    )還是行內顯示(

    flex
  • )。

主軸和側軸微信小程式Flex佈局

Flex

佈局的伸縮容器可以使用任何方向進行佈局。

容器預設有兩個軸:

主軸(
main axis)

側軸(cross axis)

微信小程式Flex佈局主軸的起始位置為
主軸起點

(main start),主軸的結束位置為

主軸終點

(main

end),而主軸的長度為主軸長度(main size)。 同理側軸的起點為側軸起點(cross start),結束位置為側軸終點(cross end),長度為側軸長度(cross size)。詳見下圖:


Flex-direction注意,主軸
並不是一定是從左到右的,同理側軸也不一定是從上往下,主軸的方向使用flex-direction屬性控制,它有4個可選值:
#row :從左到右的水平方向為主軸

微信小程式Flex佈局row-reverse
:從右到左的水平方向為主軸

column

:從上到下的垂直方向為主軸
column-reverse從下往上的垂直方向為主軸##如果水平方向為主軸,那個垂直方向就是側軸,反之亦然。 四個主軸方向設定的效果圖:

  • #範例圖

  • 圖中的實例展示了使用了不同的
  • flex-direction

    值排列方向的差異。 實例程式碼:

    <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>
    運行效果:
  • 微信小程式Flex佈局

    flex-direction

    對齊方式

    子元素有兩種對齊方式:

    just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-conent 定義子元素在主軸上面的對齊方式
    align-items 定義子元素在側軸上對齊的方式

    justify-content有5個可選的對齊方式:

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

    • flex-end  主軸結束點對齊

    • ##center 在主軸中居中對齊

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

    • space-around 每個子元素之間的距離相等,兩端的子元素距離容器的距離也和其它子元素之間的距離相同。
      justify-content的對齊方式和主軸的方向有關,下圖以flex-directionrow,主軸方式是從左到右邊,描述js<a href="http://www.php.cn/wiki/48.html" target="_blank">tify-content</a>5個值的顯示效果:

      微信小程式Flex佈局
      # #justify-content

    align-items

    表示側軸上的對齊方式:

      ##stretch
    •  填滿整個容器(預設值)

    • flex-start
    • 側軸的起點對齊

      ## flex-end
    • 側軸的終點對齊
    • center
    •  在側軸中置中對齊

    微信小程式Flex佈局

    #baseline

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


    ######align-tiems###設定的對齊方式,和側軸的方向有關,下圖以###flex-direction###為###row###,側軸方向是###從上到下###,描述###align-items###的5個值顯示效果: ##################aign-items######有了主軸和側軸的方向再加上設定他們的對齊方式,就可以實現大部分的頁面佈局了。 ############

以上是微信小程式Flex佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn