微信小程式開發:Flex布局

小程式頁面配置方式採用的是 Flex 布局。

Flex 布局，是W3c在2009年提出的一種新的方案，可以簡便，完整，響應式的實現各種頁面配置。

Flex布局提供了元素在容器中的對齊，方向以及順序，甚至他們可以是動態或者不確定的大小的。

Flex布局的主要特徵是能夠調整其子項目在不同的螢幕大小中能夠用最適合的方法填充合適的空間。

flex布局

Flex布局的特點:

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

• 在樣式層可以調換和重排順序

• 主軸和側軸方便配置

• 子項目的空間展開和填充

• 沿著容器對齊

小程式實現了 Flex 布局,簡單介紹下 Flex 布局在小程式中的使用。

伸縮容器

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

• display:block 指定為塊內容器模式，總是使用新行開始顯示，小程式的視圖容器(view,scroll-view和swiper)預設都是 dispaly:block 。

• display:flex :指定為行內容器模式，在一行內顯示子項目，可以使用 flex-wrap 屬性指定其是否換行， flex-wrap 有三個值: nowrap(不換行) , wrap(換行) , wrap-reverse(換行第一行在下面)

使用 display:block (預設值)的代碼:

 1 2      3 

顯示效果:

block

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

flex

可以從看到 block 和 flex 的區別，子項目 view 是在換行顯示( block )還是行內顯示( flex )。

主軸和側軸

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

容器預設有兩個軸： 主軸(main axis) 和 側軸(cross axis) 。

主軸的開始位置為 主軸起點 (main start)，主軸的結束位置為 主軸終點 (main end),而主軸的長度為 主軸長度 (main size)。

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

Flex-direction

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

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

• row-reverse ：從右至左的水平方向為主軸

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

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

如果水平方向為主軸，那個垂直方向就是側軸，反之亦然。

四種主軸方向設定的:

樣本圖

圖中的執行個體展示了使用了不同的 flex-direction 值排列方向的區別。

執行個體代碼:

  1 2 3   c1 c2        c3  

運行效果：

flex-direction

對齊

子項目有兩種對齊：

• justify-conent 定義子項目在主軸上面的對齊

• align-items 定義子項目在側軸上對齊的方式

• jstify-content 有5個可選的對齊:

• flex-start 主軸起點對齊(預設值)

• flex-end 主軸結束點對齊

• center 在主軸中置中對齊

• space-between 左右對齊，除了兩端的子項目分別靠向兩端的容器之外，其他子項目之間的間隔都相等

• space-around 每個子項目之間的距離相等，兩端的子項目距離容器的距離也和其它子項目之間的距離相同。
  justify-content 的對齊和主軸的方向有關，以 flex-direction 為 row ，主軸方式是 從左至右 ,描述 jstify-content 5個值的顯示效果:

justify-content

align-items 表示側軸上的對齊:

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

• flex-start 側軸的起點對齊

• flex-end 側軸的終點對齊

• center 在側軸中置中對齊

• baseline 以子項目的第一行文字對齊

align-tiems 設定的對齊，和側軸的方向有關，以 flex-direction 為 row ,側軸方向是 從上到下 ,描述 align-items 的5個值顯示效果:

aign-items

有了主軸和側軸的方向再加上設定他們的對齊，就可以實現大部分的頁面配置了。

