转自:http://hi.baidu.com/wizardchilde/blog/item/9c0fbf38273414f5b211c7b7.html

<?xml version="1.0" encoding="utf-8"?>

<!--<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center"

fontSize="12" verticalAlign="middle">

<mx:Panel title="自动定位" layout="horizontal" paddingLeft="10" paddingRight="10"

paddingTop="10" paddingBottom="10" verticalAlign="middle">

   <mx:Label id="lbla" fontSize="24" fontWeight="bold" width="180"/>

   <mx:Button id="btna" label="显示" click="lbla.text='Hello world'"/>

</mx:Panel>

</mx:Application>-->

<!--<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">

<mx:Panel title="绝对位置" width="220" height="90" layout="absolute">

   <mx:Label id="lblb" width="180" x="10" y="10" fontSize="24" fontWeight="bold"/>

   <mx:Button id="btnb" x="60" y="10" label="显示" click="lblb.text='hello word'"/>

</mx:Panel>

</mx:Application>-->

<!--<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" width="360" height="200">

    <mx:Panel title="基于限制的布局" layout="absolute" width="300" height="130">

        <mx:Button id="myButton" label="A button" bottom="10" right="10"/>

    </mx:Panel>

</mx:Application>-->

<!--<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" width="360" height="200">

    <mx:Panel title="拉伸组件" layout="absolute" width="300" height="130">

        <mx:Button id="myButton" label="A button" top="10" bottom="10" left="10" right="10"/>

    </mx:Panel>

</mx:Application>-->

<!--<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" width="360" height="200">

    <mx:Panel title="锁定组件中心" layout="absolute" width="300" height="130">

        <mx:Button id="myButton" label="A button" verticalCenter="0" horizontalCenter="0"/>

    </mx:Panel>

</mx:Application>-->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" width="360" height="200">

    <mx:Panel title="My Application" layout="absolute" width="300" height="130">

        <mx:Label id="myLabel" fontWeight="bold" fontSize="24" top="10" horizontalCenter="0"/>

        <mx:Button id="myButton" label="Click Me!" click="myLabel.text = &apos;Hello, World!&apos;;" bottom="10" height="22" left="10" right="10"/>

    </mx:Panel>

</mx:Application>

说明FlexAboutLayout.mxml中汇总flex组件的定位和布局

第一个例子是使用自动定位

对于大多数容器, Flex 会根据容器的布局规则 (如布局方向、容器填充和容器的子级之间的间隙) 自动定位容器子级。

对于使用自动定位的容器, 直接设置其子组件的 x 或 y 属性或调用 move() 方法没有任何效果, 或仅有一个临时效果, 因为布局计算将组件的位置设置为一个计算的结果, 而不是指定的值。

可以通过指定容器属性控制布局的各个方面。下列属性是最常见的:

layout: 可能的值有 "horizontal"、 "vertical"或 "absolute"。当设置为 "horizontal"时, 容器会将其子级布局在一行内。 当设置为 "vertical"时, 容器会将其子级布局在一列内。 有关 "absolute" 设置的信息, 请参阅绝对定位和基于限制的布局上的部分。

horizontalAlign: 可能的值有 "left"、 "center"或 "right"。

verticalAlign: 可能的值有 "top"、 "middle"或 "bottom"。

此示例覆盖 Application 容器的 horizontalAlign 属性的 "left" 的默认设置和Application 容器的 verticalAlign 属性的 "top" 的默认设置以分别指定 "center" 和 "middle"。

此示例覆盖 Panel 容器的 layout 属性的 "vertical" 的默认设置, 从而以水平方式显示 Label 和 Button 控件。 Panel 容器的 padding 属性定义容器的空白区 (以像素计)。

第二个例子是使用绝对位置

使用绝对定位有三个容器支持绝对定位:

如果您将 layout 属性指定为 "absolute", 则 Application 和 Panel 控件使用绝对定位。

Canvas 容器始终使用绝对定位。

使用绝对定位, 你通过使用其 x 和 y 属性来指定子控件的位置, 或者指定基于限制的布局；否则, Flex 会将该子级置于父容器的位置 0,0 处。 当您指定 x 和 y 坐标时, 仅当您更改这些属性值时, Flex 才会重新定位控件。

此示例将 Panel 容器的 layout 属性设置为 "absolute"。接着, 它会设置 Label 和 Button 控件的 x 和 y 属性, 从而这两个控件会重叠。

提示: 使用绝对定位是使 Flex 控件重叠的唯一方法。

第三个例子是基于限制的布局

使用基于限制的布局您可以通过使用基于限制的布局同时管理子组件大小和定位子组件, 在该布局中您锚定组件的侧边或中心以相对于组件的容器进行定位。

您可以使用基于限制的布局来确定支持绝对定位的任何容器的即时子级的位置和大小。

您通过使用子组件的 top、 bottom、 left、 right、 horizontalCenter或 verticalCenter 样式属性来指定限制。

锚定组件的边缘

您可以将组件的一个或多个边缘锚定在其容器的相应边缘的某个像素偏移处。 当容器调整大小时, 锚定的子级边缘保持与父级边缘的距离相同。

top、 bottom、 left和 right 样式属性指定组件侧边与相应的容器侧边之间的距离 (以像素计)。

下面的示例中的 Button 控件具有锚定的底边和右边, 与它所在的 Panel 容器的边相距 10 个像素。

第四个例子是拉伸组件

如果在一个方向中锚定两个边, 如顶边和底边, 则在调整容器大小时, 也会调整组件大小。

下面的示例中的 Button 控件四个边都已被锚定, 与它所在的 Panel 容器的边相距 10 个像素。

第五个例子是锁定中心

您还可以将某个子组件的水平或垂直中心 (或全部两者) 锚定在容器中心的某个像素偏移处。 除非您同时使用基于百分比的大小调整, 否则该子级不会在指定的尺寸内调整大小。

horizontalCenter 和 verticalCenter 样式指定在指定的方向上组件的中心点与容器的中心之间的距离；一个负数会从中心向左或向上移动组件。

horizontalCenter 和 verticalCenter 样式指定从容器中心的偏移 (以像素计), 应将控件置于此处。 下面的示例中的 Button 控件将两个样式都设置为 0 (零) 以完美地将它在 Panel 容器中居中。

最后一个例子是一个复杂的例子，自己看吧。。。