工具簡介：小程序layout設計工具，可視化方式進行小程序UI設計。通過鼠標拖拽組件方式進行UI布局。工具提供符合微信視覺統一的模板，并且按照FlexBox方式可視化布局。自動生成wxml和wxss，復制到微信開發者工具中即可同步顯示。視頻介紹請移步優酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html

FlexBox布局中的變幻方式很多，我們繼續了解一個左-上下結構的布局分解

左邊結構樹中WViewRow下面有兩個WViewColumn。WViewRow是橫向排列，WViewColumn是縱向排列。第一個WViewColumn中放一個圖片，第二個放兩張圖片。如下圖展開的結構樹。

下面針對第二個WViewColumn中有兩個圖片的FlexBox進行分解講解。

flex-direction=column說明內部組件主軸x是從上而下。
flex-wrap在本工具中對于column類型的不起作用。此處請注意，由于使用中column這種方式是旋轉了坐標系，所以實際設計時也容易小迷糊。建議大家盡量避免使用column。
justify-content=space-between決定了兩個圖片間隔和在WViewColumn中的位置。這個屬性決定第一個元素對齊頂端，最后一個元素對齊底部，中間有間隔。如果有5個圖片的話，第一個和第五個會緊靠上下。每個圖片的間隔是view的高度減去5個圖片高度和再除以4。數學不好的同學可以實際操作一下，在一個WViewColumn中拖入多個圖片，然后變幻justify-content屬性看看效果。
align-items=flex-start決定了在副軸y的排列方式是從原點出發。由于此view是column旋轉了坐標系，此處可能理解有點小迷糊，我在這里語言也不好描述。大家可以實際拖入組件，變幻屬性看看實際效果。
align-content屬性暫不多解釋，在下個帖子中詳細解釋一下。此例子中不影響布局。