Flexible Layout 與 Constraints Layout的使用時機

大部份玩家被 flex 吸引的主要原因都是它快速layout與製作app的能力，而flex中最常使用的三種layout方式分別為：

1、Absolute Positioning

2、Flexible Layout (Flow layout)

3、Constraints Layout

其中 Absolute Positioning 就是絕對定位，直接指定 x,y的px值來放置物件。

而大家比較喜歡也常用的則是 Flexible Layout，它的特色是版面可以隨browser視窗大小而自動調整(read: just like those windows/mac application !!)

但使用Flexible Layout 的代價往往是必需用許多HBox, VBox一層層把東西包起來，結果反而加重loading 並拖慢一點點開發速度。

也因為如此，flex 提供了第三種排版的方式，叫做 Constraints Layout，這是介於 Absolute Positioning 與 Flexible Layout 中間的一種格式，它能做到絕對定位(直接指定x/y)但又能讓長/寬(w/h)的部份隨外框大小而改變。

第三種方式看起來很方便，但許多人往往搞不清楚何時該用 Flexible Layout 或 Constraints Layout，因為能做到的效果類似，但製作手法卻很不相同。

在這篇文章中，Kevin 用一個很簡單的 Login 畫面來示範了同樣的東西，用兩種不同方式製作上的差異。

有興趣的flex2 玩家可以自已先照者上面的圖試者拉一個畫面出來，然後再看他的文章中對於Constraints Layout的解釋，就會對這個問題有清楚的概念了。

以我的經驗而言，以往我100%會用 Flow Layout來排這個login畫面，但在 F2B3大幅改良Constraints Layout 的語法後，我也開始願意嚐試使用它來排版面，因為在某些應用上，它確實能減少不必要的 H/VBox 用量，間接降低loading 與 消耗的memory，這是值得努力的方向。