Flex 4 容器可以提供一套默認的布局：Basic、Horizontal或 Vertical以及能夠基於容器內容的默認尺寸。 當進行子組件對齊操作時，注意你正在使用的容器的最小和默認尺寸。參見表 1。有些容器是可植皮的，如果真是如此，則通過在它們的皮膚上添加Spark Scroller對它們進行滾動操作。
注意Basic 布局等同於 Flex 3的絕對布局（absolute layout ）。
此外，還應該注意 Spark 容器支持包含形狀和FXG元素的 GraphicElement對象以及作為直接子組件的IVisualElement對象 UI 控件。 但並不是所有的MX容器均是這種情形。
表 1. Spark容器
| 名稱 |
最小尺寸 |
默認尺寸 |
默認布局 |
皮膚？ |
滾動條 |
注釋 |
|---|---|---|---|---|---|---|
| Group |
0x0 |
Content |
Basic |
包含於Scroller |
與Box相似但沒有skin/chrome |
|
| HGroup |
0x0 |
Content |
Horizontal |
包含於Scroller |
水平對齊條目；與Vbox相似但沒有skin |
|
| VGroup |
0x0 |
Content |
Vertical |
包含於Scroller |
垂直對齊條目；與Vbox相似但沒有skin |
|
| DataGroup |
0x0 |
Content |
Basic |
包含於Scroller |
攜帶一個數據提供者和條目渲染器 |
|
| SkinnableContainer |
0x0 |
Content |
Basic |
X |
添加至skin |
包含式樣屬性 |
| BorderContainer |
112x112 |
112x112 |
Basic |
X |
添加至skin |
包含式樣屬性 |
| Panel |
131x127 |
Content |
Basic |
X |
添加至skin |
包含標題條 |
| Application |
0x0 |
375x500 or all space in browser |
Basic |
X |
添加至skin |
Web應用程序 |
| NavigatorContent |
0x0 |
Content |
Basic |
X |
添加至skin |
用於導航容器 |
| Window |
0x0 |
100x100 |
Basic |
X |
添加至skin |
只用於AIR |
| WindowedApplication |
OS/chrome-specific |
100x375 |
Basic |
X |
添加至skin |
只用於AIR |
在默認情形下，當你利用Flash Builder創建一個web應用程序，它將分別具有955 和600 的最小寬度和最小高度。 你可以在Flash Builder 中通過從File Template中刪除minSize變量來改變這一設置。
- 在Flash Builder中，選擇Flash Builder > Preferences。
- 展開Flash Builder 並且選擇 File Templates。
- 點擊MXML Web Application 將其作為 File Type。參見圖 1。
- 點擊Edit並且刪除
${min_size}。 - 點擊OK兩次。
有些容器能夠支持嵌套 layout標簽以覆蓋表1中所示的 默認布局，它們僅僅包含作為子組件的 layout 標簽。 允許你進行布局嵌套的容器包括Application、BorderContainer、Group、Panel和SkinnableContainer。
通常，如果一個概念能夠栩栩如生地展現出來，則它易於快速地被人們接受—正如諺語所言：一副圖畫勝過千言萬語。 Justin Shacklette和 Gilles Guillemin是 FlexLayouts.org的擁有者，他們已經畫出三幅對說明Flex 4的HorizonalLayout （參見圖 2） 、Vertical Layout （參見圖 3）以及TileLayout （參見圖 4）很有幫助的示意圖。他們還展示了如何應用屬性，例如填充（paddingLeft）、對齊(horizontalAlign) 以及gap等。 你可以下載這些查看PDF。 請在下載之后欣賞他們這些令人叫絕的自定義Flex 4布局。
在Flex 3中，滾動功能內置於組件；而在 Flex 4中，該功能的實現方式不同。 因此，在 Flex 3和 Flex 4組件中，在如何處理滾動操作方面存在顯著差異。 對Group 容器以及 Hgroup、Vgroup和 DataGroup 容器進行滾動操作的最佳方法是在一個Spark Scroller對象中包裝容器。 關鍵之處是將Scroller的寬度和高度設置為你希望查看內容的尺寸。 你也可以設置滾動位置以便在相應范圍的當前位置顯示內容。 如果你沒有設置寬度和高度，或將它們設置為大於內容的值，則滾動條將不會出現。 例如，考慮下列代碼，它的任務是將Scroller的寬度和高度設置為圖像的尺寸。
<?xml version="1.0" encoding="utf-8"?> <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:Scroller width="300" height="300"> <s:Group> <mx:Image width="300" height="300" source="@Embed(source='logo.png')"/> </s:Group> </s:Scroller> </s:Application>
假如從Scroller對象中完全刪除 width和 height ，則滾動條不會顯示出來。參見圖5。
下列代碼將顯示具有水平滾動條的圖像的左半部分，允許用戶滾動到圖像的另一半部分。參見圖6。由於Scroller高度被默認設置為內容高度，故垂直滾動條將不會添加：
<?xml version="1.0" encoding="utf-8"?> <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:Scroller width="150"> <s:Group> <mx:Image width="300" height="300" source="@Embed(source='logo.png')"/> </s:Group> </s:Scroller> </s:Application>
對於可植皮的容器，其中包括 Spark Application、BorderContainer、 NavigatorContent、Panel和 Window，你應該將Scroller對象添加到圍繞 contentGroup Group對象的skin類。 例如，下面是來自一個自定義SkinnableContainer MXML 皮膚的相關代碼：
<s:Scroller width="100%" height="100%">
<s:Group id="contentGroup" minWidth="0" minHeight="0" />
</s:Scroller>
另一個可選方法是在你的代碼中將包圍你的內容的Scroller和 Group作為第一個子組件進行嵌套。 然而，首選方法是在skin類中保持Scroller的獨立狀態。 關於滾動和容器的更多詳細信息，參見 在 Spark容器中添加滾動條。
下面是我在使用容器時遵循的若干指南：
- 如果對象的容器具有基本或絕對布局，則可以使用限制條件--例如
left、right、top、bottom、horizontalCenter和verticalCenter來確定其位置。 - 如果容器擁有具有
layout標簽或通過使用Hgroup或 Vgroup獲得的 垂直或水平布局，則可以使用horizontalAlign、verticalAlign、gap、paddingTop、paddingBottom、paddingLeft和paddingRight屬性來控制子組件以及包圍它們的空白符。 這些屬性不能用於基本或絕對布局。參見表2。
表 2. 布局屬性小結
| 布局場景 |
在自身對象中使用屬性 |
在父容器中使用屬性 |
||
|---|---|---|---|---|
| 位於BasicLayout 絕對容器中的對象 |
Left, right, top, bottom |
horizontalCenter, verticalCenter |
||
| 位於Vertical、Horizontal或 TileLayout 容器中的對象 |
paddingLeft, paddingRight, paddingTop, paddingBottom |
horizontalAlign, verticalAlign |
||
<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"> <s:layout> <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/> </s:layout>
<!-- Container 1 has a BasicLayout (default) and uses constraints on the label itself for placement --> <s:SkinnableContainer id="c1" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200"> <s:Label horizontalCenter="0" top="30" text="Basic Layout using constraints on the object itself for layout."/> </s:SkinnableContainer>
<!-- Container 2 has a VerticalLayout with align and padding properties set on it for label placement --> <s:SkinnableContainer id="c2" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200" > <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="30"/> </s:layout> <s:Label text="VerticalLayout that specifies where the label is placed with properties."/> </s:SkinnableContainer> </s:Application>
- 如果希望利用水平或垂直布局在一個容器中將子組件定位在中央位置或利用 Hgroup或 VGroup將子組件定位在中央位置，則可以使用
horizontalAlign="center"和verticalAlign="middle"。 - 如果希望在一個具有基本或絕對布局的容器中將一個組件定位在中央位置，可以在需要定位在中央位置的組件中使用
horizontalCenter="0"和verticalCenter="0"。
下面兩個代碼范例使用不同技巧將一個對象定位在中央位置，它們產生的結果是相同的。
第一個范例（參見圖 8）使用 horizontalAlign="center" 和 verticalAlign="middle" ：
<?xml version="1.0" encoding="utf-8"?> <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"> <s:layout> <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/> </s:layout> <s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300"/> </s:Application>
第二個范例（參見圖 9）使用 horizontalCenter="0" 和 verticalCenter="0" ：
<?xml version="1.0" encoding="utf-8"?> <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"> <s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300" horizontalCenter="0" verticalCenter="0"/> </s:Application>
最后，給出需要牢記的若干通用技巧：
- 總體來說， 應該選擇使用限制條件 而不選擇具有（x,y）值的絕對定位方式，因為限制條件可以動態地調整瀏覽器的大小。 當為web、桌面、手機和平板電腦設備開發跨平台的應用程序時，這一點更為重要，因為這些設備的屏幕尺寸變化較大。
- 一般來說，可以將
left/right用於大小調整目的，而將horizontalCenter和verticalCenter用於定位目的。 - 對於一般居中定位目的，特別是當啟動最小尺寸窗口並且你希望對一個對象進行居中定位時，可以使用horizontalCenter。
注： 當不知使用哪個屬性時，切換至 Design視圖，以便在Property檢查工具中查看哪些選項可以使用。 在Design視圖中顯示的屬性將能夠根據選擇的組件和容器的布局進行切換。 這是一種仔細檢查你正在執行的任務的很好的方式。