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

今天我們來個庖丁解牛。對于一個完整的組合組件，看看通過工具是如何輕松完成的。
首先看看九宮格完整的樣子。

結構樹是這樣的。在結構樹中，我們可以看到WViewColumn下面有九個WViewRow。WViewColumn之上的我們可以不用管，這些是畫布上的內容，為了輔助設計用的。9個WViewRow是九宮格中的實際元素item。

每個item中圖片和文字上下排列，九個item換行排列。那么這些是怎么做到的呢，當然是FlexBox的作用。下面詳細介紹FlexBox屬性對布局的影響。
首先來介紹item的FlexBox屬性。

其中display肯定是flex。flex-direction=row表示主軸X是橫向，也就是我們習慣的xy坐標系的原點在view的左上角，x軸向右，y軸向下。如果flex-direction=column則是x軸向下，y軸向右。我們實際應用中只要使用row這種方式應該都能完成大部分布局要求。
flex-wrap=wrap表示換行。這個屬性決定了內部組件圖片和文字排列為兩行。
justify-content=space-around。這個屬性表示在每行中元素的間隔方式。由于此例中第一行是圖片，第二行是文字，所以此屬性不起作用。后面課程中會介紹。
align-items=center決定了在y軸上的排列，是垂直居中。結合justify-content=center的話，內部元素會水平、垂直居中。
align-content=space-around表示圖片和文字之間的行間距方式。頂端和底部都有留白，圖片和文字之間有留白。頂部和底部的留白是圖片和文字之間留白的一半大小。
以上屬性的設置，決定了內部元素在主軸x和副軸y的排列和間隔。我們在開始使用工具時，可以多改變一下每個屬性的值，看看布局效果。然后將自動生成的wxml和wxss粘貼到微信開發者工具中預覽。
然后我們看看最外一側view的flexbox屬性設置

display、flex-direction、flex-wrap這三個屬性告訴瀏覽器我要用flex布局，并且橫向排列和換行。
justify-content、align-items和align-content都是flex-start，決定了內部組件在x軸是從原點向右緊挨著排列，在y軸上從原點向下緊挨著排列。這樣就決定了9個item是從左上角向x和軸排列。當然我們也可以將這三個屬性設置為center，表示從view的中心向四面排列，也可以做出9宮格。
flexbox屬性的組合很多，實際開發時結合此工具的使用可以做到事半功倍的效果。通過工具中屬性的更改，便可所見即所得。
工欲善其事必先利其器，熟練掌握一個工具的使用，勢必提高我們的開發效率。大家剛開始使用此工具時，更多的變幻一下flexbox的屬性，看看布局效果。當完全掌握后，會起到意想不到的效果。