本節書摘來自異步社群《微信小程式開發入門精要》一書中的第2章，第2.1節水準排列，作者 李甯，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
第2章 布局
微信小程式開發入門精要
布局是任何支援ui的技術都會涉及到的。小程式的布局采用了和react native相同的flex（彈性布局）方式，使用方法也類似（隻是屬性名不同而已）。是以，如果讀者已經對react native的布局比較了解，那麼将非常容易掌握小程式布局。即使對react native的布局不了解，通過對本章的學習，也可以掌握小程式布局的核心技術。
本章要點
水準排列布局
水準折行排列布局
垂直排列布局
垂直折列排列布局
水準排列對齊布局
垂直排列對齊布局
水準等間隔排列布局
帶邊距的水準等間隔排列布局
2.1 水準排列
小程式的布局和react native的布局類似，采用了彈性布局的方法，即分為水準和垂直布局。預設是從左向右水準依次放置元件，或從上到下依次放置元件。
wxml檔案用于放置參與布局的元件，為了更好地描述小程式是如何布局的，本章使用了帶背景色的view元件來示範。view是小程式中所有可視元件的根。
任何可視元件都需要使用樣式來設定自身的屬性，并完成相應的布局。在小程式中，可以使用兩種方式設定樣式，一種是class屬性，另一種是style屬性。前者需要指定在wxss檔案中定義的樣式，後者允許直接在元件中定義樣式屬性。例如，如果要水準放置3個view元件，可以在wxml檔案中使用下面的代碼。
顯示的效果如圖2-1所示。
▲圖2-1 水準布局
在上面的代碼中，同時使用了class和style屬性。分别指定了樣式flex-wrp和樣式屬性flex-direction:row，其中，後者表示view中的子元件要按水準排列。flex-wrp的定義如下：
其中，display:flex表示彈性布局，flex是flexible的縮寫。
如果class屬性需要指定多個樣式，樣式直接用空格分隔，代碼如下：
前面所有的樣式都是在目前頁面的index.wxss檔案中定義的，而bc_green以及其他幾個設定顔色的樣式是在app.wxss檔案中定義的，所有的頁面都可以使用。
如果不想使用style屬性，可以将flex-direction:row放在樣式中。例如，可以在index.wxss檔案中添加如下的樣式。
可能很多讀者會發現一個問題，本節的例子中隻有3個view，如果放置了多個view會怎麼樣呢？從flex-item樣式可知，每個view的尺寸是100*100，機關是像素（px），如果放置過多，可能會發生如下兩種情況：
折行。
壓縮每一個view的寬度。
那麼到底會發生哪種情況呢？我們不妨做一個實驗，代碼如下：
在上述代碼中，view中包含了9個子view，儲存index.wxml檔案後，會顯示如圖2-2所示的效果。
▲圖2-2 壓縮了每一個view的寬度
很明顯，每一個view的寬度都被壓縮了（因為每一個view的預設尺寸是一個正方形），以适應裝置的寬度。不過這種處理方式可能并不符合我們的要求，如果我們的要求是讓每一個view的尺寸保持不變，但是一行放不下，怎麼能夠折到下一行呢？答案就在下一節！