[轉]flex4.5中布局元素与布局约束的用法

其實 Flex 4.0 也可以參考使用。
以下是轉載資料。

來源：flex4.5中布局元素与布局约束的用法

在对容器元素布局与容器布局约束时，经常会用到horizontalAlign、verticalAlign和horizontalCenter、verticalCenter这两组对象，尤其是在spark中如果遇到可以同时设置这两组对象的容器时（如HGroup，VGroup）会有种混乱的感觉。
因此我们最好弄清它们的作用和用法
1、horizontalAlign、verticalAlign：
这一组对象是容器的属性，用来设置容器内的元素在水平和垂直方向的对齐方式，所以操作的对象是容器内的元素。在HGroup，VGroup和中存在这两个属性，但Group、Panel 和Application中没有这两个属性。
2、horizontalCenter、verticalCenter：
这一组对象是容器的样式，用来设置约束容器本身在父级容器中的位置，从组件（容器本身）中心到锚点目标（父级容器）的内容区域中心的距离，所以操作的对象是容器本身。在HGroup，VGroup，Panel 和Application中都存在这组样式。
需要注意的是，这组样式仅在 Canvas 容器中的组件上，或在 Panel 或 Application 容器（layout 属性设置为 absolute）中的组件上使用时才发挥作用。也就是说如果在spark中还必须保证Application的layout属性设置为absolute，即在spark中保留Application的layout属性为默认或设置为

<s:layout>
    <s:BasicLayout/>
</s:layout>

否则horizontalCenter、verticalCenter的样式设置将无效。
下面为一个测试例子：

<?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="600" minHeight="400">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <s:VGroup width="50%" height="50%" horizontalAlign="center" verticalAlign="middle" horizontalCenter="0" verticalCenter="0">
        <s:Label text="label"/>
        <s:Button label="button"/>
    </s:VGroup>
    <s:Group width="20%" height="20%" horizontalCenter="0" verticalCenter="100">
        <s:Button label="g button"/>
    </s:Group>
</s:Application>