1# Flex布局 2 3> **说明：** 4> - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5> 6> - 仅当父组件是 Flex、Column、Row 、GridRow时生效。 7 8 9## 属性 10 11| 名称 | 参数说明 | 描述 | 12| ------------ | ---------------------------------------- | ---------------------------------------- | 13| flexBasis | number \| string | 设置组件在父容器主轴方向上的基准尺寸。<br/>默认值：'auto'（表示组件在主轴方向上的基准尺寸为组件原本的大小）。<br/>不支持百分比设置。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 14| flexGrow | number | 设置父容器的剩余空间分配给此属性所在组件的比例。<br/>默认值：0<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 15| flexShrink | number | 设置父容器压缩尺寸分配给此属性所在组件的比例。<br/>父容器为Row、Column时，默认值：0<br/> 父容器为Flex时，默认值：1<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 16| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | 子组件在父容器交叉轴的对齐格式，会覆盖Flex、Column、Row、GridRow布局容器中的alignItems设置。<br/>GridCol可以绑定alignsSelf属性来改变它自身在交叉轴方向上的布局。<br/>默认值：ItemAlign.Auto<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 17| layoutWeight | number \| string | 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。<br>默认值：0<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：**<br/>仅在Row/Column/Flex布局中生效。<br/>可选值为大于等于0的数字，或者可以转换为数字的字符串。 | 18 19 20## 示例 21 22```ts 23// xxx.ets 24@Entry 25@Component 26struct FlexExample { 27 build() { 28 Column({ space: 5 }) { 29 Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') 30 // 基于主轴的基准尺寸 31 // flexBasis()值可以是字符串'auto',表示基准尺寸是元素本来的大小,也可以是长度设置，相当于.width()/.height() 32 Flex() { 33 Text('flexBasis(100)') 34 .flexBasis(100) // 这里表示宽度为100vp 35 .height(100) 36 .backgroundColor(0xF5DEB3) 37 .textAlign(TextAlign.Center) 38 Text(`flexBasis('auto')`) 39 .flexBasis('auto') // 这里表示宽度保持原本设置的60%的宽度 40 .width('60%') 41 .height(100) 42 .backgroundColor(0xD2B48C) 43 .textAlign(TextAlign.Center) 44 }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) 45 46 Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%') 47 // flexGrow()表示剩余空间分配给该元素的比例 48 Flex() { 49 Text('flexGrow(2)') 50 .flexGrow(2) // 父容器分配给该Text的宽度为剩余宽度的2/3 51 .height(100) 52 .backgroundColor(0xF5DEB3) 53 .textAlign(TextAlign.Center) 54 Text('flexGrow(1)') 55 .flexGrow(1) // 父容器分配给该Text的宽度为剩余宽度的1/3 56 .height(100) 57 .backgroundColor(0xD2B48C) 58 .textAlign(TextAlign.Center) 59 }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) 60 61 Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%') 62 // flexShrink()表示该元素的压缩比例，基于超出的总尺寸进行计算 63 // 第一个text压缩比例是0,另外两个都是1,因此放不下时等比例压缩后两个,第一个不压缩 64 Flex({ direction: FlexDirection.Row }) { 65 Text('flexShrink(0)') 66 .flexShrink(0) 67 .width('50%') 68 .height(100) 69 .backgroundColor(0xF5DEB3) 70 .textAlign(TextAlign.Center) 71 Text('default flexShrink') // 默认值为1 72 .width('40%') 73 .height(100) 74 .backgroundColor(0xD2B48C) 75 .textAlign(TextAlign.Center) 76 Text('flexShrink(1)') 77 .flexShrink(1) 78 .width('40%') 79 .height(100) 80 .backgroundColor(0xF5DEB3) 81 .textAlign(TextAlign.Center) 82 }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) 83 84 Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%') 85 // alignSelf会覆盖Flex布局容器中的alignItems设置 86 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { 87 Text('no alignSelf,height:70') 88 .width('33%') 89 .height(70) 90 .backgroundColor(0xF5DEB3) 91 .textAlign(TextAlign.Center) 92 Text('alignSelf End') 93 .alignSelf(ItemAlign.End) 94 .width('33%') 95 .height(70) 96 .backgroundColor(0xD2B48C) 97 .textAlign(TextAlign.Center) 98 Text('no alignSelf,height:100%') 99 .width('34%') 100 .height('100%') 101 .backgroundColor(0xF5DEB3) 102 .textAlign(TextAlign.Center) 103 }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) 104 }.width('100%').margin({ top: 5 }) 105 } 106} 107``` 108 109 110
