对于许多刚开始接触Flex的开发者来说，代码中常常会出现过多的嵌套容器和无用的属性，这通常是因为开发者没有正确理解如何使用它们。本文将总结Flex 4中的容器类型以及一些基本信息，包括它们是否支持换肤、如何实现滚动等。同时，也会提到最小尺寸和默认尺寸的重要性，因为它们会影响子元素的对齐方式。需要注意的是，基础布局等同于Flex 3中的绝对布局。
默认情况下，Flash Builder会创建一个Application，其最小宽度和最小高度分别为955和600。可以通过进入Flash Builder的Preferences，然后移除File Template中的minSize变量来改变这个设置。路径为：Flash Builder | Preferences | Flash Builder | File templates | MXML Web Application。选择‘Edit…’，然后移除模板中的${min_size}，接着点击‘Ok’。
所有Spark容器都支持将GraphicElements（如形状、FXG等）和VisualElements（如UI控件）作为直接子元素。但并非所有MX容器都支持这一点。
一些容器支持嵌套布局标签以覆盖默认布局（将布局标签作为子元素）。允许嵌套布局的容器有：
通常，通过视觉呈现概念可以更快地理解（正如人们所说，一张图片胜过千言万语）。以下是一些由Justin Shacklette和Gilles Guillemin拥有的FlexLayouts.org提供的图片，它们在解释Flex 4中不同的默认布局方面非常有帮助。它们还展示了如何应用诸如padding、horizontal/verticalAlign和gap等属性。可以从下载参考PDF。同时，也可以查看他们酷炫的自定义Flex 4布局。
在Flex4中，滚动与Flex 3有很大不同，因为滚动功能没有内置在组件中。滚动Group的最佳实践是将该Group（或HGroup/VGroup等）包装在一个Spark Scroller对象中。关键在于设置Scroller的宽度和高度，使其等于希望可见的内容大小。也可以设置滚动位置以在该范围内的当前位置显示内容。如果没有设置宽度/高度，或者设置的值大于内容的大小，滚动条将不会出现。例如，考虑以下代码，结果将不显示滚动条（因为宽度和高度等于图片的大小）。如果完全省略Scroller对象中的width/height，也会发生相同的结果：
<?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>
在以下代码中，图片的一半将垂直显示，并带有垂直滚动条，允许滚动查看图片的另一半。由于高度默认会根据内容高度进行调整，所以不会添加水平滚动条：
<?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对象添加到皮肤类中的内容组Group对象周围。以下代码片段展示了如何在自定义SkinnableContainer MXML皮肤中实现这一点：
<s:Scroller width="100%" height="100%">
<s:Group id="contentGroup" minWidth="0" minHeight="0"/>
</s:Scroller>
另一种方法是在代码中将Scroller和Group作为内容的第一子元素嵌套，但首选方法是在皮肤类中保持分离。有关滚动和容器的更多详细信息，请参见。
如果对象的容器具有基础或绝对布局，请使用left、right、top、bottom、horizontalCenter、verticalCenter等约束来确定其位置。
如果对象的容器具有垂直或水平布局（无论是使用布局标签还是使用HGroup/VGroup），则使用horizontalAlign、verticalAlign、gap、paddingTop、paddingBottom、paddingLeft、paddingRight属性来控制子元素及其周围的空白区域。这些属性不能与基础/绝对布局一起使用。
请注意以下代码和截图，展示了两个容器，每个容器都具有不同的布局和指定的属性，但显示的结果相同：
<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: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>
<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"来居中要居中的组件。
请注意接下来的两个代码示例，它们展示了相同的结果：
<?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>
结果：
<?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值进行绝对定位，因为约束会随着浏览器的大小动态调整。这一点在许多开发者为网络、桌面、移动设备、平板电脑等开发跨平台应用程序时尤为重要，因为屏幕尺寸差异很大。
使用left/right或horizontalCenter属性，但不要同时使用，否则它们会相互竞争，这是不良做法。出于同样的原因，使用top/bottom或verticalCenter属性。