Flex元素布局规则总结

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

二、FLex中的布局规则
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的宽度时进行换行。
所有的Tile容器单元格大小都相同。
Flex将Tile容器的单元格排在正方形网格中，每一个单元格内放入一个子元素。布局方式由direction属性决定。
4. Grid
与HTML中的Table很相似，可以定义行数、列数，并选择一个单元格来放置子元素。
5. Form
表单容器，用于构建表单，生成特定的表单布局