以弹性方式布局子组件的容器组件。
名称 | 描述 |
---|---|
Row | 主轴与行方向一致作为布局模式。 |
RowReverse | 与Row方向相反方向进行布局。 |
Column | 主轴与列方向一致作为布局模式。 |
ColumnReverse | 与Column相反方向进行布局。 |
效果如下
代码如下
this.HeaderCon('基础使用(FlexDirection.Row)')
Flex({ direction: FlexDirection.Row }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
}
this.HeaderCon('基础使用(FlexDirection.RowReverse)')
Flex({ direction: FlexDirection.RowReverse }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
}
效果如下
代码如下
this.HeaderCon('基础使用(Column/ColumnReverse)')
Row(){
Flex({ direction: FlexDirection.Column }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
}.width('50%')
Flex({ direction: FlexDirection.ColumnReverse }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
}.width('50%')
}.justifyContent(FlexAlign.SpaceBetween)
名称 | 描述 |
---|---|
NoWrap | Flex容器的元素单行/列布局,子项不允许超出容器。 |
Wrap | Flex容器的元素多行/列排布,子项允许超出容器。 |
WrapReverse | Flex容器的元素反向多行/列排布,子项允许超出容器。 |
this.HeaderCon('基础使用(FlexWrap.wrap)')
Flex({ wrap:FlexWrap.Wrap }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
Text('6').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('7').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('8').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('9').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('10').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
}
this.HeaderCon('基础使用(FlexWrap.NoWrap)')
Flex({ wrap:FlexWrap.NoWrap }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
Text('6').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('7').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('8').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('9').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('10').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
}
this.HeaderCon('基础使用(FlexWrap.WrapReverse)')
Flex({ wrap:FlexWrap.WrapReverse }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
Text('6').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('7').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('8').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('9').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('10').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
}
名称 | 描述 |
---|---|
Start | 元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐。 |
Center | 元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
End | 元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐。 |
SpaceBetween | Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐。 |
SpaceAround | Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
SpaceEvenly | Flex主轴方向均匀分配弹性元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
this.HeaderCon('基础使用(justifyContent)')
Text('FlexAlign.Start').fontSize(25)
Flex({justifyContent:FlexAlign.Start}){
Text('1').width('20%').height(100).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('FlexAlign.Center').fontSize(25)
Flex({justifyContent:FlexAlign.Center}){
Text('1').width('20%').height(100).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('FlexAlign.End').fontSize(25)
Flex({justifyContent:FlexAlign.End}){
Text('1').width('20%').height(100).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('FlexAlign.SpaceBetween').fontSize(25)
Flex({justifyContent:FlexAlign.SpaceBetween}){
Text('1').width('20%').height(100).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('FlexAlign.SpaceAround').fontSize(25)
Flex({justifyContent:FlexAlign.SpaceAround}){
Text('1').width('20%').height(100).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('FlexAlign.SpaceBetween').fontSize(25)
Flex({justifyContent:FlexAlign.SpaceBetween}){
Text('1').width('20%').height(100).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
名称 | 描述 |
---|---|
Auto | 使用Flex容器中默认配置。 |
Start | 元素在Flex容器中,交叉轴方向首部对齐。 |
Center | 元素在Flex容器中,交叉轴方向居中对齐。 |
End | 元素在Flex容器中,交叉轴方向底部对齐。 |
Stretch | 元素在Flex容器中,交叉轴方向拉伸填充。容器为Flex且设置Wrap为FlexWrap.Wrap或FlexWrap.WrapReverse时,元素拉伸到与当前行/列交叉轴长度最长的元素尺寸。其余情况在元素未设置尺寸时,拉伸到容器尺寸。 |
this.HeaderCon('基础使用(alignItems)')
Text('ItemAlign.Auto').fontSize(25)
Flex({alignItems:ItemAlign.Auto}){
Text('1').width('20%').height(40).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(100).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('ItemAlign.Start').fontSize(25)
Flex({alignItems:ItemAlign.Start}){
Text('1').width('20%').height(40).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(100).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('ItemAlign.Center').fontSize(25)
Flex({alignItems:ItemAlign.Center}){
Text('1').width('20%').height(40).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(100).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('ItemAlign.End').fontSize(25)
Flex({alignItems:ItemAlign.End}){
Text('1').width('20%').height(40).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(100).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('ItemAlign.Stretch').fontSize(25)
Flex({alignItems:ItemAlign.Stretch}){
Text('1').width('20%').height(40).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(100).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}.width('100%')
Text('ItemAlign.Baseline').fontSize(25)
Flex({alignItems:ItemAlign.Baseline}){
Text('1').width('20%').height(40).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(100).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}.width('100%')
注意: 仅在wrap为Wrap或WrapReverse下生效。
FlexAlign.Start | |
---|---|
FlexAlign.Center | |
FlexAlign.End | |
FlexAlign.SpaceBetween | |
FlexAlign.SpaceAround | |
FlexAlign.SpaceEvenly |
名称 | 描述 |
---|---|
Start | 元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐。 |
Center | 元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
End | 元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐。 |
SpaceBetween | Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐。 |
SpaceAround | Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
SpaceEvenly | Flex主轴方向均匀分配弹性元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
this.HeaderCon('基础使用(alignContent)')
Text('FlexAlign.Start').fontSize(25)
Flex({alignContent:FlexAlign.Start, wrap:FlexWrap.Wrap}){
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}.height(100).backgroundColor('#e4e4e4')
Text('FlexAlign.Center').fontSize(25)
Flex({alignContent:FlexAlign.Center, wrap:FlexWrap.Wrap}){
Text('1').width('20%').height(80).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
}.height(100).backgroundColor('#e3e3e3')
Text('FlexAlign.End').fontSize(25)
Flex({alignContent:FlexAlign.End, wrap:FlexWrap.Wrap}){
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}.height(100).backgroundColor('#e5e5e5')
Text('FlexAlign.SpaceBetween').fontSize(25)
Flex({alignContent:FlexAlign.SpaceBetween, wrap:FlexWrap.Wrap}){
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
Text('6').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('7').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
}.height(400).backgroundColor('#e6e6e6')
Text('FlexAlign.SpaceAround').fontSize(25)
Flex({alignContent:FlexAlign.SpaceAround, wrap:FlexWrap.Wrap}){
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
Text('6').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('7').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
}.height(400).backgroundColor('#e7e7e7')
Text('FlexAlign.SpaceEvenly').fontSize(25)
Flex({alignContent:FlexAlign.SpaceEvenly, wrap:FlexWrap.Wrap}){
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
Text('6').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('7').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
}.height(400).backgroundColor('#e8e8e8')