工欲善其事必先利其器。下面為大家介紹一款工具軟件，如何做到輕松布局。
我們平時(shí)開(kāi)發(fā)工作中都會(huì)有這種情況發(fā)生，為了能夠完成一個(gè)布局，css改了之后刷新頁(yè)面，不對(duì)再改css再刷新看效果。這樣重復(fù)的工作不知道要做多少遍才能得到最終效果。
現(xiàn)在方便了，通過(guò)使用這款layout設(shè)計(jì)工具，可以大大提高開(kāi)發(fā)效率。
小程序布局使用的是flexbox方式。這種方式在布局上有非常多的組合，作為開(kāi)發(fā)人員需要非常熟悉這些屬性的做好布局。
下面的是最常用的屬性：
justify-content

• flex-start
• flex-end
• center
• space-between
• space-around

align-items

• flex-start
• flex-end
• center
• stretch

align-content

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch

以上三個(gè)屬性的組合是5*4*6，結(jié)果是多少自己算吧。
但是通過(guò)工具的使用，只要通過(guò)屬性設(shè)置面板的操作，便可以做到所見(jiàn)即所得的效果。

設(shè)置這些屬性后，工具中自動(dòng)調(diào)整布局效果。無(wú)需我們修改代碼-刷新效果-修改代碼-刷新效果這樣無(wú)為的循環(huán)了。

設(shè)計(jì)之后，wxml和wxss代碼是自動(dòng)生成的，復(fù)制到微信開(kāi)發(fā)者工具中即可看到一樣的效果。

你們計(jì)算出來(lái)組合結(jié)果了嗎？由于組合較多，這里我就不一一演示了。下面截圖是幾個(gè)例子。

上圖中是flexbox屬性組合使用的示例。
大家可以下載軟件實(shí)際動(dòng)手操作一下。下載鏈接在http://www.wxapp-union.com/forum.php?mod=viewthread&tid=845的正文中。
大家可以根據(jù)下面的截圖實(shí)際操練一下，并請(qǐng)將設(shè)計(jì)結(jié)果截圖跟帖吧。

熟練掌握工具之后，大家可以實(shí)際比較一下自己寫(xiě)wxml和wxss的時(shí)間和使用工具設(shè)計(jì)的時(shí)間。