以下資料部分來自 Adobe 中文網，但資料年代已久，根據我自己的實驗對部分內容進行了更新。
?
首先了解一個基礎定義：容器和組件，組件是button、textInput等用于顯示的基礎控件，容器是用來存放組件的，多個組件可以放在同一容器中。
Flex的依靠容器來執行布局，大多數 Flex 容器使用預定義的規則集來自動定位您在其內定義的所有子組件。Flex 4 容器可以提供一套默認的布局：Basic、Horizontal或 Vertical以及能夠基于容器內容的默認尺寸。有些容器是可植皮的，可以通過在它們的皮膚上添加Spark Scroller對它們進行滾動操作。
?
在 Flex 應用程序中定位組件的方法有三種 :
? ??? 使用自動定位
? ??? 使用絕對定位
? ??? 使用基于限制的布局
?
-
使用自動定位
對于大多數容器 , Flex 會根據容器的布局規則 ( 如布局方向、容器填充和容器內的組件之間的間隙 ) 自動定位容器子級。對于使用自動定位的容器 , 直接設置其子組件的 x 或 y 屬性或調用 move() 方法沒有任何效果 , 或僅有一個臨時效果 , 因為布局計算將組件的位置設置為一個計算的結果 , 而不是指定的值。
在 Flex4 中自動定義使用 <s:HorizontalLayout/> 或 <s:VerticalLayout/> 來定位：使用 HorizontalLayout ，容器內的組件會排放在豎直方向（同一列排放），使用 <s:VerticalLayout/> ，容器內的組件會排放在水平方向（同一行排放）。
可以通過指定容器屬性控制容器內組件的布局格式，下列屬性是最常見的 :
? horizontalAlign: 布局元素的水平對齊方式，可能的值有 "left" 、 "center" 或 "right" 。
? verticalAlign: 布局元素的豎直對齊方式，可能的值有 "top" 、 "middle" 或 "bottom" 。
Flex4 相對 Flex3 在標簽上有很大改動， Flex4 的布局采用 s 標簽的形式來配置。看下面這個例子：首先對整個面板定義了 VerticalLayout （豎直布局），同時水平和豎直都居中，然后在 Application 容器中定義了一個 panel 面板， panel 面板定義了 HorizontalLayout （水平布局），水平對齊方式采用了右對齊的方式。
?
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:Panel width="30%" height="60" title="panel布局">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="right"/>
</s:layout>
<s:Button label="按鈕1" x="36" y="47"/>
<s:TextInput/>
</s:Panel>
<s:TextInput text="文本框"/>
<s:TextArea text="多行文本框"/>
</s:Application>
?
最后看運行結果：
-
使用絕對定位 ?
使用絕對定位 , 你通過使用其 x 和 y 屬性來指定子控件的位置 , 或者指定基于限制的布局；否則 , Flex 會將該子級置于父容器的位置 0,0 處。 當您指定 x 和 y 坐標時 , 僅當您更改這些屬性值時 , Flex 才會重新定位控件。使用 <s:BasicLayout/> 標簽表示絕對定位。
下面這個例子使用了據對定位標簽，容器內名為“按鈕 1 ”的組件未定義坐標則默認放在 (0 ， 0) 位置，其它組件定義了 xy 則排放在指定位置。
?
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Button label="按鈕1"/>
<s:Button x="92" y="0" label="按鈕2"/>
<s:TextInput x="0" y="29"/>
</s:Application>
??
運行效果如下圖所示：
?
-
使用基于限制的布局
您可以通過使用基于限制的布局同時管理子組件大小和定位子組件 , 在該布局中您錨定組件的側邊或中心以相對于組件的容器進行定位。
您可以使用基于限制的布局來確定支持絕對定位的任何容器的即時子級的位置和大小。
您通過使用子組件的 top 、 bottom 、 left 、 right 、 horizontalCenter 或 verticalCenter 樣式屬性來指定限制。
→錨定組件的邊緣
您可以將組件的一個或多個邊緣錨定在其容器的相應邊緣的某個像素偏移處。 當容器調整
大小時 , 錨定的子級邊緣保持與父級邊緣的距離相同。
top 、 bottom 、 left 和 right 樣式屬性指定組件側邊與相應的容器側邊之間的距離 ( 以像素計 ) 。比如 top ，表示組件的上邊界離容器上邊界的像素距離。注意：所有錨定屬性的值必須為整數，不能是 ”100px” 之類的。
如下例所示，在一個 panel 容器中放入一個 button ，指定上下左右的錨點都是 50 像素：
?
<s:Panel x="41" y="27" width="250" height="200">
<s:Button top="50" bottom="50" left="50" right="50" label="按鈕"/>
</s:Panel>
?
如果在一個方向中錨定兩個邊 , 如頂邊和底邊 , 則在調整容器大小時 , 也會調整組件大小（組件可能被拉伸或壓縮）。上例運行結果如下圖所示：
?
→錨定組件的中心
您還可以將某個子組件的水平或垂直中心 ( 或全部兩者 ) 錨定在容器中心的某個像素偏移處。除非您同時使用基于百分比的大小調整 , 否則該子級不會在指定的尺寸內調整大小。
horizontalCenter 和 verticalCenter 樣式指定在指定的方向上組件的中心點與容器的中心之間的距離（以像素計）；一個負數會從中心向左或向上移動組件。
下面的示例定義了一個 panel 容器，容器中放有三個 button ，中心錨點位置都不同：
?
<s:Panel x="41" y="27" width="250" height="200">
<s:Button horizontalCenter="-50" verticalCenter="-50" label="按鈕1"/>
<s:Button horizontalCenter="0" verticalCenter="-0" label="按鈕2"/>
<s:Button horizontalCenter="50" verticalCenter="50" label="按鈕3"/>
</s:Panel>
?
運行效果如下圖所示：
?
以上三種布局方式可以混合使用，以達到最終目的。
不過有些規則需要注意：不要使用 verticalCenter 樣式屬性指定 top 或 bottom 樣式屬性 , verticalCenter 值會覆蓋其他屬性。類似地，不要使用 horizontalCenter 樣式屬性指定 left 或 right 樣式屬性。
由基于限制的布局確定的大小會覆蓋任何顯式或基于百分比的大小規范。例如，如果您指定 left 和 right 樣式屬性，產生的基于限制的寬度會覆蓋由 width 或 percentWidth 屬性設置的任何寬度。
?
最后，給出需要牢記的若干通用技巧：
- 總體來說，? 應該選擇使用限制條件 ?而不選擇具有（x,y）值的絕對定位方式，因為限制條件可以動態地調整瀏覽器的大小。 當為web、桌面、手機和平板電腦設備開發跨平臺的應用程序時，這一點更為重要，因為這些設備的屏幕尺寸變化較大。
-
一般來說，可以將?
left/right?用于大小調整目的，而將?horizontalCenter?和verticalCenter?用于定位目的。 - 對于一般居中定位目的，特別是當啟動最小尺寸窗口并且你希望對一個對象進行居中定位時，可以使用horizontalCenter。
?
- 容器滾動條設置
容器用來裝載組件等內容，如果容器內組件過多可能會造成內容過長過寬等情況，所以我們會考慮使用滾動條來固定容器長寬。
在Flex 3中，滾動功能內置于組件；而在 Flex 4中，該功能的實現方式不同。對Group 容器以及 Hgroup、Vgroup和 DataGroup 容器進行滾動操作的最佳方法是在一個Spark Scroller對象中包裝容器。 關鍵之處是將Scroller的寬度和高度設置為你希望查看內容的尺寸。你也可以設置滾動位置以便在相應范圍的當前位置顯示內容。
Scroller屬性：
horizontalScrollPolicy：水平方向是否顯示滾動條（auto：自動如果超出范圍才顯示，on：一直顯示，off：一直不顯示）
verticalScrollPolicy：豎直方向是否顯示滾動條（auto：自動如果超出范圍才顯示，on：一直顯示，off：一直不顯示）
下面例子，在panel中添加一個group并且設置滾動條：
?
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="300" minHeight="300" >
<s:Panel x="41" y="27" width="250" height="200" >
<s:Scroller width="100%" height="100%">
<s:Group>
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:Button label="按鈕"/>
<s:Button label="按鈕"/>
<s:Button label="按鈕"/>
<s:Button label="按鈕"/>
<s:Button label="按鈕"/>
<s:Button label="按鈕"/>
<s:Button label="按鈕"/>
<s:Button label="按鈕"/>
</s:Group>
</s:Scroller>
</s:Panel>
</s:Application>
?運行結果如下圖所示：
?需要注意的是：<
s:Scroller>內只支持繼承自group的容器。
?
?
?
?
最后附上一份精彩文章： Flex4容器使用的若干技巧
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
