1# Flex Layout 2 3> **NOTE** 4> - The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 5> 6> - The flex layout is valid only when the parent component is a **\<Flex>**, **\<Column>**, or **\<Row>** component. 7 8 9## Attributes 10 11| Name | Type | Description | 12| ---------- | ------------------------------------------- | ------------------------------------------------------------ | 13| flexBasis | number \| string | Base size of the component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)<br>This attribute cannot be set in percentage.<br>Since API version 9, this API is supported in ArkTS widgets.| 14| flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.| 15| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.<br>Since API version 9, this API is supported in ArkTS widgets.| 16| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container.<br>Default value: **ItemAlign.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.| 17 18 19## Example 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 // Base size in the main axis 30 // The value of flexBasis() can be 'auto' or a number, which is equivalent to .width()/.height(). 31 Flex() { 32 Text('flexBasis(100)') 33 .flexBasis(100) // The width is 100 vp. 34 .height(100) 35 .backgroundColor(0xF5DEB3) 36 .textAlign(TextAlign.Center) 37 Text(`flexBasis('auto')`) 38 .flexBasis('auto') // The width is 60% of the original width. 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() indicates the percentage of the remaining space allocated to the component. 47 Flex() { 48 Text('flexGrow(2)') 49 .flexGrow(2) // The width allocated to the <Text> component is 2/3 of the remaining width of the parent container. 50 .height(100) 51 .backgroundColor(0xF5DEB3) 52 .textAlign(TextAlign.Center) 53 Text('flexGrow(1)') 54 .flexGrow(1) // The width allocated to the <Text> component is 1/3 of the remaining width of the parent container. 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() indicates the percentage of the shrink size allocated to the component. 62 // The value is 0 for the first <Text> component and 1 for the other two <Text> components. This means that, if the components cannot be completely displayed in the parent container, the latter two are shrunk proportionally, while the former is not shrunk. 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') // The default value is 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 // The alignSelf setting overrides the alignItems setting of the parent container. 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
