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