Flex布局
Flex布局是一种一维布局，在UI工具上，只能在一个方向上排列元素，可以是水平方向，也可以是垂直方向。
属性
| Property | Description |
|---|---|
| FlexFlow | 方向，水平或垂直 |
| MainPlace | 主轴对齐方式，相当于Css的justify-content |
| CrossPlace | 侧轴对齐方式，相当于Css的align-items |
| TrackCrossPlace | 轨道对齐方式，相当于Css的align-content |
| Childrens | 子Flex布局，每一个子Flex布局只能添加一个控件，该控件的大小由子Flex布局的大小决定，填充满整个子Flex布局 |
Flex布局是Css Flexbox的一个子集，MainPlace、CrossPlace、TrackCrossPlace的实现方式，可以参考 CSS Flexbox中的justify-content、align-items、align-content。
MainPlace
当所有子Flex布局的GrowEn属性为false时，该属性生效，决定子元素沿着主轴方向如何排列。默认对齐方式是LV_FLEX_MAIN_ALIGN_START。
- Start：
LV_FLEX_ALIGN_START，子元素从起始位置开始排列。 - End：
LV_FLEX_ALIGN_END，子元素从结束位置开始排列。 - Center：
LV_FLEX_ALIGN_CENTER，子元素在主轴方向居中对齐。 - SpaceEvenly：
LV_FLEX_ALIGN_SPACE_EVENLY，子元素均匀分布，间隔相等。 - SpaceAround：
LV_FLEX_ALIGN_SPACE_AROUND，子元素之间的间隔相等，且两边留有半个间隔的空白。 - SpaceBetween：
LV_FLEX_ALIGN_SPACE_BETWEEN，子元素之间的间隔相等，但两边不留空白。
CrossPlace
CrossPlace属性决定子元素在交叉轴（与主轴垂直的轴）上的对齐方式。
- Start：
LV_FLEX_ALIGN_START，子元素从交叉轴的起始位置开始对齐。 - End：
LV_FLEX_ALIGN_END，子元素从交叉轴的结束位置对齐。 - Center：
LV_FLEX_ALIGN_CENTER，子元素在交叉轴方向居中对齐。
TrackCrossPlace
- Start：
LV_FLEX_ALIGN_START，子元素从轨道的起始位置开始对齐。 - End：
LV_FLEX_ALIGN_END，子元素从轨道的结束位置对齐。 - Center：
LV_FLEX_ALIGN_CENTER，子元素在轨道内居中对齐。
子Flex布局属性
| Property | Description |
|---|---|
| GrowEn | 是否启用Flex Grow，启用时子元素可伸展填满父布局 |
| Grow | Flex Grow的值，决定子元素的伸展比例 |
| 宽度 | 子Flex布局的宽度，可以是固定值或百分比 |
| 高度 | 子Flex布局的高度，可以是固定值或百分比 |
当GrowEn属性被启用时，子Flex布局的大小将根据父Flex布局的大小进行动态调整。如果多个子Flex布局启用了Grow，它们的大小将根据Grow值的比例来分配。
例如：
- 垂直布局，有三个子Flex布局，
Grow值分别为1、2、3，那么它们的高度将按照1:2:3的比例进行分配。
- 垂直布局，有三个子Flex布局，前两个分别设置
Grow为1，最后一个没有启用Grow，但设置了高度为50%。此时前两个子Flex布局将按照1:1的比例分配剩余的50%高度。
- 垂直布局，有五个子Flex布局，都没有启用
Grow，但高度都设置为30%。此时这些子Flex布局的总高度将超出父Flex布局，滚动以查看所有内容。
样式
| Style | Part | Description |
|---|---|---|
| Padding Row | Main | 行内边距 |
| Padding Column | Main | 列内边距 |