Flex中的布局

首先说说Flex中的元素分类，从功能层面可以把Flex中的元素分为组件（Components）和容器（Containers）两大类：
组件 - 是指那类具有明确交互或数据展示功能的元素，例如Button、Checkbox、Datagrid、List等。
容器 - 是指那类用来放置其他元素的元素，容器往往不具有特定的交互功能，主要的功能就是容纳元素。容器再细分又可以分为布局（Layout）容器和导航（Navigator）容器，其中布局容器的功能就是用来布局界面元素的，例如Application、Panel等；导航容器主要用于进行功能性的导航，进行界面切换，例如TabNavigator等。

FLex中的布局即指布局容器的布局方式，按布局特点我这里将布局分了两大类：基础布局和特殊布局。

基础布局 - 基于layout属性和constraint-based的布局，例如Application、Panel、Canvas等容器。

特殊布局 - 基于容器的功能，不同的容器具有非常特征明显的布局方式，例如Form、Grid、HDividedBox等。

基础布局

1. layout属性

通过容器的layout属性来设置布局方式，主要包括以下几种：

（1）vertical - 从上至下依次将子元素垂直放置在单一一列中，而水平对齐方式可以通过horizontalAlign来设置，垂直对齐方式可以通过verticalAlign来设置。

（2）horizontal - 从左至右依次将子元素水平放置在单一一行中，而水平对齐方式可以通过horizontalAlign来设置，垂直对齐方式可以通过verticalAlign来设置。

（3）absolute - 通过设置每个子元素的x/y属性来定位每个子元素，而容器不会自动调整子组件的位置。

2. constraint-based

在容器的layout属性设置为absolute的情况下（Canvas除外，因为Canvas只有absoulte一种布局方式，因此Canvas默认如此），可以使用constraint-based布局。这种布局方式是通过子元素的4条侧边以及2条中心线与容器相应侧边和中心线的偏移量来决定子元素的定位的。相应的属性设置如下：

（1）left - 子元素左边离容器左侧的距离

（2）right - 子元素右边离容器右侧的距离

（3）top - 子元素顶边离容器顶部的距离

（4）bottom - 子元素底边离容器底部的距离

（5）horizontalCenter - 子元素水平中心线相对于容器水平中心线的偏移量，正数表示向容器底部方向的偏移，负数表示向容器顶部方向的偏移。

（6）verticalCenter - 子元素垂直中心线相对于容器垂直中心线的偏移量，正数表示向容器右侧的偏移，正数表示向容器左侧的偏移。

*说明：horizontalCenter、verticalCenter的优先级比其他四个属性的优先级更高，即当设置了horizontalCenter、verticalCenter，其他四个属性将被忽略。此外，Constraint-based布局必须在absolute的基础布局中才有效。由于Canvas容器的布局有且仅有absolute的，因此在Canvas中可以直接使用Constraint-based布局，而在其他容器中需要将layout属性设置为absolute后Constraint-based布局才有效，而且使用了Constraint-based布局后，设置x/y坐标将不再有意义。

特殊布局

1. Box

在absolute布局中，子元素的位置不会随着容器的大小的变化而重新调整，这在窗口大小发生变化可能会对界面的布局产生不可预料的影响，很多情况下希望子元素的位置能够随容器的大小变化而自动调整，Box布局就可以满足这个需求。Box布局分为HBox和VBox,其中HBox布局与设置容器layout为horizontal是一致的，将子元素水平排列在一行中，而VBox则是将子元素垂直排在一列中。

2. DividedBox

分为HDividedBox和VDividedBox，DividedBox会将子元素划分为一个独立的分区，并且各个分区之间会存在一条调整栏，通过调整栏用于可以手动的调整各个分区的大小。

3. Tile

与HBox类似，也会将子元素水平放置，不过不同的是tile并不将所有子元素放置在单独一行，而是在即将超过tile的宽度时进行换行。

4. Grid

与HTML中的Table很相似，可以定义行数、列数，并选择一个单元格来放置子元素。

5. Form

表单容器，用于构建表单，生成特定的表单布局。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/11893231/viewspace-671440/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/11893231/viewspace-671440/