鸿蒙界面开发（三）：弹性布局

弹性布局——Flex

常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
Flex组件布局方向为主轴

布局方向 ——参数direction

通过设置参数direction，可以决定主轴的方向，从而控制子元素的排列方向。

FlexDirection.Row（默认值）：主轴为水平方向，子元素从起始端沿着水平方向开始排布。
FlexDirection.RowReverse：主轴为水平方向，子元素从终点端沿着FlexDirection. Row相反的方向开始排布。
FlexDirection.Column：主轴为垂直方向，子元素从起始端沿着垂直方向开始排布。
FlexDirection.ColumnReverse：主轴为垂直方向，子元素从终点端沿着FlexDirection. Column相反的方向开始排布。

主轴方向只有水平和垂直，交叉轴有四个方向。
默认方向：主轴水平，交叉轴垂直

布局换行——wrap参数

弹性布局分为单行布局和多行布局。
默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。当子元素的宽高总和超过父容器的宽高，Flex会默认压缩显示。
wrap参数控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。

Flex({ wrap: FlexWrap.NoWrap }) {}
FlexWrap. NoWrap（默认值）：不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
FlexWrap. Wrap：换行，每一行子元素按照主轴方向排列。
FlexWrap. WrapReverse：换行，每一行子元素按照主轴反方向排列。

单行/单列情况下，优先使用线性布局。

主轴对齐方式——justifyContent参数

和线性布局类似，不同的是此处用参数表示，线性布局用属性表示。

FlexAlign.Start（默认值）：子元素在主轴方向起始端对齐， 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。
FlexAlign.Center：子元素在主轴方向居中对齐。
FlexAlign.End：子元素在主轴方向终点端对齐, 最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。
FlexAlign.SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。
FlexAlign.SpaceAround：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素到主轴起始端的距离和最后一个子元素到主轴终点端的距离是相邻元素之间距离的一半。
FlexAlign.SpaceEvenly：Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与主轴起始端的间距、最后一个子元素到主轴终点端的间距均相等。

交叉轴对齐方式

容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。

1容器组件设置交叉轴对齐——alignItems参数

Flex({ alignItems: ItemAlign.Auto }) {  }
ItemAlign.Auto：使用Flex容器中默认配置。？？
ItemAlign.Start：交叉轴方向首部对齐。
ItemAlign.Center：交叉轴方向居中对齐。
ItemAlign.End：交叉轴方向底部对齐。
==========================================
ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。
ItemAlign. Baseline：交叉轴方向/文本基线/对齐。

2子元素设置交叉轴对齐——alignSelf属性

设置子元素在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。
alignSelf是子元素的属性

.alignSelf(ItemAlign.Start)
利用ItemAlign枚举

3内容对齐——alignContent参数

设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的Flex布局中生效，可选值有：

Flex({ justifyContent: FlexAlign.SpaceBetween, 
			wrap: FlexWrap.Wrap, 
			alignContent: FlexAlign.Start }) {}

FlexAlign.Start：子元素各行与交叉轴起点对齐。
FlexAlign.Center：子元素各行在交叉轴方向居中对齐。
FlexAlign.End：子元素各行与交叉轴终点对齐。
FlexAlign.SpaceBetween：子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。
FlexAlign.SpaceAround：子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
FlexAlign.SpaceEvenly: 子元素各行间距，子元素首尾行与交叉轴两端距离都相等。

和alignItems参数的区别在哪里？

自适应拉伸

在弹性布局父组件尺寸过小时，通过子元素的以下属性设置其在父容器的占比，达到自适应布局。

flexBasis：设置子元素在父容器主轴方向上的基准尺寸。如果设置了该属性，则子项占用的空间为该属性所设置的值；如果没设置该属性，那子项的空间为width/height的值。
.flexBasis('auto') // 未设置width以及flexBasis值为auto，内容自身宽度
----------------------------------------
.width('40%')
.flexBasis('auto') //设置width以及flexBasis值auto，使用width的值
-----------------------------------------------
.flexBasis(100)  // 未设置width以及flexBasis值为100，宽度为100vp
---------------------------------------------
.flexBasis(100)
.width(200) // flexBasis值为100，覆盖width的设置值，宽度为100vp

flexGrow：设置父容器的剩余空间分配给此属性所在组件的比例。用于分配父组件的剩余空间。
flexShrink: 当父容器空间不足时，子元素的压缩比例。

场景示例