第九程式註明：

要想開發小程式，每個人都需要先了解 Flex。小程式的開發框架使用了 Flex 排版佈局，它能幫助開發者以最快的速度，構建美觀而具有動態調整性質的小程式排版。

但是，Flex 在目前為止尚未大範圍地推廣和使用，甚至許多前端開發者，在上手小程式開發後才知道 Flex。

那麼，使用 Flex 到底有什麼優勢？Flex 中有多少排版模式？如何正確使用 Flex 排版？

今天，就來帶大家看看 Flex 的正確使用方法。希望本文可以幫助大家，利用好 Flex 構建具有良好體驗的小程式。

文 | 姜家志

微信小程式頁面佈局方式採用 Flex 佈局格式，它是 W3c 在 2009 年提出的一種新的網頁排版方案，可以簡便、完整地實現各種響應式頁面佈局。

Flex 佈局的主要特點是：能夠讓同級元素在不同的螢幕大小中，用最適合的方法填充空間。同時，Flex 提供了元素在容器中的對齊方式、對齊方向以及元素順序，甚至被編排的元素可以是動態的或是不確定的大小的。

Flex 佈局有如下特點：

• 任意方向的伸縮
• 在樣式層可以調換和重排順序
• 主軸和側軸方便配置
• 子元素的空間拉伸和填充
• 沿容器對齊

本文將會簡單介紹 Flex 佈局在微信小程式中的使用。

伸縮容器

在小程式中，設有 display: flex 或者 display: block 的元素就是一個 flex container（伸縮容器），裡面的子元素稱為 flex item（伸縮專案）。在 flex container 中，子元素都可以使用 Flex 進行佈局。

• display: block 指定為塊內容器模式，總是使用新行開始顯示，微信小程式的檢視容器（view、scroll-view 和 swiper）會預設設定 display: block；
• display:flex：指定為行內容器模式。在一行內顯示的子元素，可以使用 flex-wrap 屬性指定其是否換行、如何換行。flex-wrap 有三個值：nowrap（不換行）、wrap（向下換行），以及 wrap-reverse（向上換行）。

假設我們有以下的程式碼：

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

使用 display: block（預設值）時，顯示效果如下：

改換成 display: 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 屬性控制，它有 4 個可選值：

• row ：從左到右的水平方向
• 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>

執行效果：

對齊方式

子元素有兩種對齊方式：

• justify-conent 定義子元素在主軸上面的對齊方式；
• align-items 定義子元素在側軸上對齊的方式。

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

• flex-start：主軸起點對齊（預設值）；
• flex-end：主軸結束點對齊；
• center：在主軸中居中對齊；
• space-between：兩端對齊，除了兩端的子元素分別靠向兩端的容器之外，其他子元素之間的間隔都相等；
• space-around：每個子元素之間的距離相等，兩端的子元素距離容器的距離也和其它子元素之間的距離相同。

justify-content 的對齊方式和主軸的方向有關。下圖以 flex-direction 為 row，主軸方式是從左到右，描述 justify-content 5 個值的顯示效果：

align-items 表示側軸上的對齊方式：

• stretch：填充整個容器（預設值）；
• flex-start：側軸的起點對齊；
• flex-end：側軸的終點對齊；
• center：在側軸中居中對齊；
• baseline：以子元素的第一行文字對齊。

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

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

希望大家可以通過本文，熟悉 Flex 佈局，開發出體驗更好的小程式。