參考教材：《微信小程式開發入門與實踐》 雷磊
前置知識：JavaScript，CSS
什麼是flex布局
在上一篇部落格裡，筆者在hello.wxss 裡使用了
display: flex;
。什麼是flex呢？
flex布局是W3c組織在2009年提出的一個新的布局方案，其宗旨是讓頁面的布局樣式更加簡單，并且可以很好地支援
響應式布局
。這并不是小程式所獨有的技術，它本身是CSS文法的一部分。隻不過早期時候，主流的浏覽器對flex布局的支援并不完善，造成了開發者并不知道與這種布局方式的存在或者使用非常少，我們還是習慣使用傳統的position和float屬性來布局。但傳統的布局方式有它的缺陷 ，比如垂直居中就不是那麼容易實作，flex布局可以很好的解決這些問題。現在，小程式能夠非常好的支援flex布局，并且這也是官方推薦的布局方式。
響應式布局
上面提到了
響應式布局
這一個概念，這個概念是為解決移動網際網路浏覽而誕生的，主要為了解決同一個WEB頁面在不同裝置和環境中均能獲得一緻性使用者體驗的問題。在設計頁面的時候，為了友善，我們通常隻在某一種分辨率下預覽我們的界面，比如上一篇部落格裡，筆者就選擇了iPhone6作為模拟的機型預覽小程式的頁面。響應式布局的目标就是在其他移動裝置（比如ipad，各種不同分辨率的安卓手機）通路該界面的時候，頁面的整體布局不發生改變。我們之前設計hello頁面用到的flex布局其實就是響應式布局，該頁面在Nexus5和ipad pro上通路的時候，不會由于分辨率的不同而造成頁面結構的改變。
flex布局的簡單使用
display: flex
主要作用在容器上，比如
view
元件就是一個容器。設定
display: flex
是使用flex布局的先決條件。
然後我們來了解
軸
的概念。類似平面直角坐标系中有不同方向的兩條軸（X軸和Y軸）一樣，使用Flex布局的容器内也有兩條隐形的軸，一條稱為
主軸
，另一條稱為
交叉軸
，兩條
軸也互相垂直。我們隻需要通過
flex-direction
指定
主軸
的方向，另一方向的軸自動成為
交叉軸
。
flex-direction: column; 主軸垂直，方向自上而下，交叉軸為水準方向
flex-direction: column-reverse;主軸垂直，方向自下而上，交叉軸為水準方向
flex-direction: row;主軸水準，方向自左向右，交叉軸為垂直方向
flex-direction: row-reverse;主軸垂直，方向自右向左，交叉軸為垂直方向
下面四張圖中，紅色的箭頭代表的是主軸方向，容器内的元素在主軸方向上按順序排列。
另外，我們還用到了一個
align-items:center
屬性，這個是設定容器元素在交叉軸上的位置，
center
代表在交叉軸上居中，當然還可以設定其他的值，不過這是css的知識了，讀者自行嘗試，在這裡就不贅述了。
最後，列出在wxml中的其他容器，如下：
| 元件名 | 說明 |
|---|---|
| view | 視圖容器 |
| scroll-view | 可滾動視圖容器 |
| swiper | 滑塊視圖容器 |
| movable-view/movable-area | 可移動的視圖容器 |
| cover-view | 覆寫在原生元件之上的文本視圖 |
| cover-image | 覆寫在原生元件之上的圖檔視圖 |
自适應機關rpx
大家應該注意到了，在hello.wxss樣式表裡，絕大多數長度機關都設定的是
rpx
這個全新的機關。比如設定圖檔大小的時候。
要透徹的了解rpx這個機關，還需要對移動端的分辨率有一定的了解，比如實體分辨率px和邏輯分辨率pt等概念。簡單的說，rpx将随着螢幕尺寸的變換而變換，但px不會。這裡我們隻需要記住如下的結論：
在iPhone6的寬度750個實體像素作為标準來做設計圖，1實體像素=1rpx=0.5px，
比如在iPhone6寬度750實體像素下，要顯示一張寬和高都是200像素*200像素的圖檔，就要把圖檔的高度和寬度都設定為
200rpx
，或者
100px
，這時候在iphone6上的顯示的效果都是一樣的，但是我們換到其他機型的時候，就會出現差異。因為rpx将随着螢幕尺寸的變換而變換，但px不會改變大小。
下面做個嘗試，在iPhone6尺寸下，将圖檔的機關改為px，圖檔的大小沒有發生改變，然後把模拟器切換都ipad pro ，圖檔還是一樣的大小（但是相對于整個頁面來說，變小了），即px作為機關的時候，不會由于頁面的變大，該改變大小。
注意：隻有在iPhone6尺寸下，1實體像素=1rpx=1px才成立
,官方推薦使用iPhone6的尺寸标準來設計界面。
rpx和px 之間的選擇
在進行移動開發的時候，我們經常要考慮不同分辨率下頁面的顯示情況。比如對于
margin
屬性或者
image
元件，很多時候，需要他們随着裝置的尺寸不同動态的變化，以保持頁面元素之間的分布可以保持
一定的比例關系
。
但有時候，比如boder屬性（設定邊框的樣式）,我們不需要它動态變化。如果随着頁面的放大，邊框的線條變得越來越寬，頁面就不好看了。
是以選擇使用rpx還是px需要看實際情況，此外也需要讀者自己去多多嘗試