Arkts基础＜布局之弹性布局＞

弹性布局（Flex）一般是在需要子元素均分容器空间的时候使用，如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。先看一下基本概念：

主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束位置称为主轴结束点。

交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。

布局方向

布局方向是通过设置FlexOptions的参数direction来决定主轴的方向，从而控制子元素的排列方向。

方向排序
主轴为水平方向，子元素从起始端沿着水平方向开始排布。

@Entry
@ComponentV2
struct Index {
build() {
Flex({ direction: FlexDirection.Row }) {
Text('1').width('33%').height(50).backgroundColor('#F5DEB3')
Text('2').width('33%').height(50).backgroundColor('#D2B48C')
Text('3').width('33%').height(50).backgroundColor('#F5DEB3')
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor('#AFEEEE')
}
}

主轴为水平方向，子元素从终点端沿着FlexDirection.Row相反的方向开始排布。

FlexDirection.RowReverse

垂直方向
主轴为垂直方向，子元素从起始端沿着垂直方向开始排布。

@Entry
@ComponentV2
struct Index {
build() {
Flex({ direction: FlexDirection.Column }) {
Text('1').width('33%').height(50).backgroundColor('#F5DEB3')
Text('2').width('33%').height(50).backgroundColor('#D2B48C')
Text('3').width('33%').height(50).backgroundColor('#F5DEB3')
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor('#AFEEEE')
}
}

主轴为垂直方向，子元素从终点端沿着FlexDirection.Column相反的方向开始排布。

FlexDirection.ColumnReverse

换行，每一行子元素按照主轴方向排列。

FlexWrap.Wrap

换行，每一行子元素按照主轴反方向排列。

FlexWrap.WrapReverse

主轴对齐方式

关于主轴对齐方式，是通过justifyContent参数设置，这个地方不过多讲解，简单展示一下使用方式，很好理解。

Flex({ justifyContent: FlexAlign.Start }) {
// 这里是子元素
}

对齐方式有6种，如图所示：

交叉轴对齐方式

想要知道交叉轴对齐方式如何使用，就需要先明白什么是交叉轴。交叉轴是相对于主轴而言的，它是布局容器中与主轴垂直的那个轴线，所有布局元素在交叉轴方向上的对齐、分布都基于这个轴线来控制。使用比喻方式形容就是，主轴是管道延伸的方向（比如水平的水管），交叉轴就是垂直于管道的方向（比如上下）。
现在已经明白交叉轴的意思，接下来我们看一下交叉轴对方方式包含哪些？

1、容器组件设置交叉轴对齐
过设置FlexOptions的参数alignItems，设置子元素在交叉轴的对齐方式。示例代码：
1.1、ItemAlign.Auto为默认配置

Flex({ alignItems: ItemAlign.Auto }) {
Text('1').width('33%').height(30).backgroundColor('#F5DEB3')
Text('2').width('33%').height(40).backgroundColor('#D2B48C')
Text('3').width('33%').height(50).backgroundColor('#F5DEB3')
}
.size({ width: '90%', height: 80 })
.padding(10)
.backgroundColor('#AFEEEE')

布局效果：

1.2、ItemAlign.Start：交叉轴方向首部对齐。

1.3、ItemAlign.Center：交叉轴方向居中对齐。

1.4、ItemAlign.End：交叉轴方向底部对齐。

1.5、ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

1.6、ItemAlign.Baseline：交叉轴方向文本基线对齐。

2、子元素设置交叉轴对齐
子元素的alignSelf属性可以设置子元素在父容器交叉轴的对齐方式，且会覆盖Flex布局容器中alignItems配置，及子元素设置的对齐方式优先级较高。示例代码：

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器组件设置子元素居中
Text('alignSelf Start').width('25%').height(80)
.alignSelf(ItemAlign.Start)
.backgroundColor('#F5DEB3')
Text('alignSelf Baseline')
.alignSelf(ItemAlign.Baseline)
.width('25%')
.height(80)
.backgroundColor('#D2B48C')
Text('alignSelf Baseline').width('25%').height(100)
.backgroundColor('#F5DEB3')
.alignSelf(ItemAlign.Baseline)
Text('no alignSelf').width('25%').height(100)
.backgroundColor('#D2B48C')
Text('no alignSelf').width('25%').height(100)
.backgroundColor('#F5DEB3')

}.width('90%').height(220).backgroundColor('#AFEEEE')

Flex容器中alignItems设置交叉轴子元素的对齐方式为居中，子元素自身设置了alignSelf属性的情况，覆盖父组件的alignItems值，表现为alignSelf的定义。

3、内容对齐
通过alignContent参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的Flex布局中生效，可选值有：
3.1、FlexAlign.Start：子元素各行与交叉轴起点对齐

Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {
Text('1').width('30%').height(20).backgroundColor('#F5DEB3')
Text('2').width('60%').height(20).backgroundColor('#D2B48C')
Text('3').width('40%').height(20).backgroundColor('#D2B48C')
Text('4').width('30%').height(20).backgroundColor('#F5DEB3')
Text('5').width('20%').height(20).backgroundColor('#D2B48C')
}
.width('90%')
.height(100)
.backgroundColor('#AFEEEE')

3.2、FlexAlign.Center：子元素各行在交叉轴方向居中对齐。

3.3、FlexAlign.End：子元素各行与交叉轴终点对齐。

3.4、FlexAlign.SpaceBetween：子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。

3.5、FlexAlign.SpaceAround：子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。

3.6、FlexAlign.SpaceEvenly: 子元素各行间距，子元素首尾行与交叉轴两端距离都相等。

自适应拉伸

在弹性布局父组件尺寸过小时，通过子元素的以下属性设置其在父容器的占比，达到自适应布局。
1、flexBasis：设置子元素在父容器主轴方向上的基准尺寸。如果设置了该属性，则子项占用的空间为该属性所设置的值；如果没设置该属性，那子项的空间为width/height的值。

Flex() {
Text('flexBasis("auto")')
.flexBasis('auto')// 未设置width以及flexBasis值为auto，内容自身宽度
.height(100)
.backgroundColor('#F5DEB3')
Text('flexBasis("auto")'+' width("40%")')
.width('40%')
.flexBasis('auto')//设置width以及flexBasis值auto，使用width的值
.height(100)
.backgroundColor('#D2B48C')

Text('flexBasis(100)') // 未设置width以及flexBasis值为100，宽度为100vp
.flexBasis(100)
.height(100)
.backgroundColor('#F5DEB3')

Text('flexBasis(100)')
.flexBasis(100)
.width(200)// flexBasis值为100，覆盖width的设置值，宽度为100vp
.height(100)
.backgroundColor('#D2B48C')
}.width('90%').height(120).padding(10).backgroundColor('#AFEEEE')

2、flexGrow：设置父容器的剩余空间分配给此属性所在组件的比例，用于分配父组件的剩余空间。

Flex() {
Text('flexGrow(1)')
.flexGrow(1)
.width(100)
.height(100)
.backgroundColor('#F5DEB3')
Text('flexGrow(4)')
.flexGrow(4)
.width(100)
.height(100)
.backgroundColor('#D2B48C')

Text('no flexGrow')
.width(100)
.height(100)
.backgroundColor('#F5DEB3')
}.width(360).height(120).padding(10).backgroundColor('#AFEEEE')

父容器宽度360vp，三个子元素原始宽度均为100vp，左右padding为20vp，总和320vp，剩余空间40vp根据flexGrow值的占比分配给子元素，未设置flexGrow的子元素不参与分配。

3、flexShrink: 当父容器空间不足时，子元素的压缩比例。

Flex({ direction: FlexDirection.Row }) {
Text('flexShrink(3)')
.flexShrink(3)
.width(200)
.height(100)
.backgroundColor('#F5DEB3')

Text('no flexShrink')
.width(200)
.height(100)
.backgroundColor('#D2B48C')

Text('flexShrink(2)')
.flexShrink(2)
.width(200)
.height(100)
.backgroundColor('#F5DEB3')
}.width(400).height(120).padding(10).backgroundColor('#AFEEEE')

父容器宽度400vp，三个子元素原始宽度为200vp，左右padding为20vp，父容器给子元素的布局空间为380vp，超出父容器空间220vp。