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 container is a [Flex](ts-container-flex.md), [Column](ts-container-column.md), [Row](ts-container-row.md), or [GridRow](ts-container-gridrow.md) (only for **alignSelf**) component.
7
8## flexBasis
9
10flexBasis(value: number | string)
11
12Sets the base size of the component.
13
14**Widget capability**: This API can be used in ArkTS widgets since API version 9.
15
16**Atomic service API**: This API can be used in atomic services since API version 11.
17
18**System capability**: SystemCapability.ArkUI.ArkUI.Full
19
20**Parameters**
21
22| Name| Type                      | Mandatory| Description                                                        |
23| ------ | -------------------------- | ---- | ------------------------------------------------------------ |
24| value  | number \| string | Yes  | 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.|
25
26## flexGrow
27
28flexGrow(value: number)
29
30Sets the percentage of the parent container's remaining space that is allocated to the component.
31
32**Widget capability**: This API can be used in ArkTS widgets since API version 9.
33
34**Atomic service API**: This API can be used in atomic services since API version 11.
35
36**System capability**: SystemCapability.ArkUI.ArkUI.Full
37
38**Parameters**
39
40| Name| Type  | Mandatory| Description                                                        |
41| ------ | ------ | ---- | ------------------------------------------------------------ |
42| value  | number | Yes  | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**|
43
44## flexShrink
45
46flexShrink(value: number)
47
48Sets the percentage of the parent container's shrink size that is allocated to the component. When the parent container is **Column** or **Row**, you must set the size along the main axis.
49
50**Widget capability**: This API can be used in ArkTS widgets since API version 9.
51
52**Atomic service API**: This API can be used in atomic services since API version 11.
53
54**System capability**: SystemCapability.ArkUI.ArkUI.Full
55
56**Parameters**
57
58| Name| Type  | Mandatory| Description                                                        |
59| ------ | ------ | ---- | ------------------------------------------------------------ |
60| value  | number | Yes  | Percentage of the parent container's shrink size that is allocated to the component.<br>If the parent container is [Column](ts-container-column.md) or [Row](ts-container-row.md), the default value is **0**.<br> If the parent container is [Flex](ts-container-flex.md), the default value is **1**.|
61
62## alignSelf
63
64alignSelf(value: ItemAlign)
65
66Sets the alignment mode of the child components along the cross axis of the parent container.
67
68**Widget capability**: This API can be used in ArkTS widgets since API version 9.
69
70**Atomic service API**: This API can be used in atomic services since API version 11.
71
72**System capability**: SystemCapability.ArkUI.ArkUI.Full
73
74**Parameters**
75
76| Name| Type                                       | Mandatory| Description                                                        |
77| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ |
78| value  | [ItemAlign](ts-appendix-enums.md#itemalign) | Yes  | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container ([Flex](ts-container-flex.md), [Column](ts-container-column.md), [Row](ts-container-row.md), or [GridRow](ts-container-gridrow.md)).<br>[GridCol](./ts-container-gridcol.md) can have the **alignsSelf** attribute bound to change its own layout along the cross axis.<br>Default value: **ItemAlign.Auto**|
79
80
81## Example
82
83```ts
84// xxx.ets
85@Entry
86@Component
87struct FlexExample {
88  build() {
89    Column({ space: 5 }) {
90      Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
91      // Base size in the main axis
92      // The value of flexBasis() can be 'auto' or a number, which is equivalent to .width()/.height().
93      Flex() {
94        Text('flexBasis(100)')
95          .flexBasis(100) // The width is 100 vp.
96          .height(100)
97          .backgroundColor(0xF5DEB3)
98          .textAlign(TextAlign.Center)
99        Text(`flexBasis('auto')`)
100          .flexBasis('auto') // The width is 60% of the original width.
101          .width('60%')
102          .height(100)
103          .backgroundColor(0xD2B48C)
104          .textAlign(TextAlign.Center)
105      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
106
107      Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%')
108      // flexGrow() indicates the percentage of the remaining space allocated to the component.
109      Flex() {
110        Text('flexGrow(2)')
111          .flexGrow(2) // The width allocated to the Text component is 2/3 of the remaining width of the parent container.
112          .height(100)
113          .backgroundColor(0xF5DEB3)
114          .textAlign(TextAlign.Center)
115        Text('flexGrow(1)')
116          .flexGrow(1) // The width allocated to the Text component is 1/3 of the remaining width of the parent container.
117          .height(100)
118          .backgroundColor(0xD2B48C)
119          .textAlign(TextAlign.Center)
120      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
121
122      Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
123      // flexShrink() indicates the percentage of the shrink size allocated to the component.
124      // 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.
125      Flex({ direction: FlexDirection.Row }) {
126        Text('flexShrink(0)')
127          .flexShrink(0)
128          .width('50%')
129          .height(100)
130          .backgroundColor(0xF5DEB3)
131          .textAlign(TextAlign.Center)
132        Text('default flexShrink') // The default value is 1.
133          .width('40%')
134          .height(100)
135          .backgroundColor(0xD2B48C)
136          .textAlign(TextAlign.Center)
137        Text('flexShrink(1)')
138          .flexShrink(1)
139          .width('40%')
140          .height(100)
141          .backgroundColor(0xF5DEB3)
142          .textAlign(TextAlign.Center)
143      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
144
145      Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%')
146      // The alignSelf setting overrides the alignItems setting of the parent container.
147      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
148        Text('no alignSelf,height:70')
149          .width('33%')
150          .height(70)
151          .backgroundColor(0xF5DEB3)
152          .textAlign(TextAlign.Center)
153        Text('alignSelf End')
154          .alignSelf(ItemAlign.End)
155          .width('33%')
156          .height(70)
157          .backgroundColor(0xD2B48C)
158          .textAlign(TextAlign.Center)
159        Text('no alignSelf,height:100%')
160          .width('34%')
161          .height('100%')
162          .backgroundColor(0xF5DEB3)
163          .textAlign(TextAlign.Center)
164      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
165    }.width('100%').margin({ top: 5 })
166  }
167}
168```
169
170![flex](figures/flex.PNG)
171