# Flex >![](../../public_sys-resources/icon-note.gif) **NOTE:** >This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. The **** component allows for an elastic layout. ## Required Permissions None ## Child Components This component can contain child components. ## APIs Flex\(options?: \{ direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign \}\) Creates a standard **** component. - Parameters

Name

Type

Mandatory

Default Value

Description

direction

FlexDirection

No

Row

Direction in which child components are arranged in the <Flex> component, that is, the direction of the main axis.

wrap

FlexWrap

No

NoWrap

Whether the <Flex> component has a single line or multiple lines.

justifyContent

FlexAlign

No

Start

Alignment mode of the child components in the <Flex> component along the main axis.

alignItems

ItemAlign

No

Stretch

Alignment mode of the child components in the <Flex> component along the cross axis.

alignContent

FlexAlign

No

Start

Alignment mode of the child components in a multi-line <Flex> component along the cross axis. This parameter is valid only when wrap is set to Wrap or WrapReverse.
- FlexDirection enums

Name

Description

Row

The child components are arranged in the same direction as the main axis runs along the rows.

RowReverse

The child components are arranged opposite to the Row direction.

Column

The child components are arranged in the same direction as the main axis runs down the columns.

ColumnReverse

The child components are arranged opposite to the Column direction.
- FlexWrap enums

Name

Description

NoWrap

The child components in the <Flex> component are arranged in a single line, and they may overflow.

Wrap

The child components in the <Flex> component are arranged in multiple lines, and they may overflow.

WrapReverse

The child components in the <Flex> component are reversely arranged in multiple lines, and they may overflow.
- FlexAlign enums

Name

Description

Start

The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.

Center

The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.

End

The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.

SpaceBetween

The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same.

SpaceAround

The child components are evenly distributed along the main axis, with a half-size space on either end. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components.

SpaceEvenly

The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same.
## Example ``` // Example 01 @Entry @Component struct FlexExample1 { build() { Column() { Column({ space: 5 }) { Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%') Flex({ direction: FlexDirection.Row }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) Text('4').width('20%').height(50).backgroundColor(0xD2B48C) } .height(70) .width('90%') .padding(10) .backgroundColor(0xAFEEEE) Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') Flex({ direction: FlexDirection.RowReverse }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) Text('4').width('20%').height(50).backgroundColor(0xD2B48C) } .height(70) .width('90%') .padding(10) .backgroundColor(0xAFEEEE) Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%') Flex({ direction: FlexDirection.Column }) { Text('1').width('100%').height(40).backgroundColor(0xF5DEB3) Text('2').width('100%').height(40).backgroundColor(0xD2B48C) Text('3').width('100%').height(40).backgroundColor(0xF5DEB3) Text('4').width('100%').height(40).backgroundColor(0xD2B48C) } .height(160) .width('90%') .padding(10) .backgroundColor(0xAFEEEE) Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') Flex({ direction: FlexDirection.ColumnReverse }) { Text('1').width('100%').height(40).backgroundColor(0xF5DEB3) Text('2').width('100%').height(40).backgroundColor(0xD2B48C) Text('3').width('100%').height(40).backgroundColor(0xF5DEB3) Text('4').width('100%').height(40).backgroundColor(0xD2B48C) } .height(160) .width('90%') .padding(10) .backgroundColor(0xAFEEEE) }.width('100%').margin({ top: 5 }) }.width('100%') } } ``` ![](figures/flex01.gif) ``` // Example 02 @Entry @Component struct FlexExample2 { build() { Column() { Column({ space: 5 }) { Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%') Flex({ wrap: FlexWrap.Wrap }) { Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('3').width('50%').height(50).backgroundColor(0xD2B48C) } .width('90%') .padding(10) .backgroundColor(0xAFEEEE) Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%') Flex({ wrap: FlexWrap.NoWrap }) { Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('3').width('50%').height(50).backgroundColor(0xF5DEB3) } .width('90%') .padding(10) .backgroundColor(0xAFEEEE) Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) { Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('3').width('50%').height(50).backgroundColor(0xD2B48C) } .width('90%') .height(120) .padding(10) .backgroundColor(0xAFEEEE) }.width('100%').margin({ top: 5 }) }.width('100%') } } ``` ![](figures/flex02.png) ``` // Example 03 @Component struct JustifyContentFlex { @Prop justifyContent : number build() { Flex({ justifyContent: this.justifyContent }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) } .width('90%') .padding(10) .backgroundColor(0xAFEEEE) } } @Entry @Component struct FlexExample3 { build() { Column() { Column({ space: 5 }) { Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') JustifyContentFlex({ justifyContent: FlexAlign.Start }) Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') JustifyContentFlex({ justifyContent: FlexAlign.Center }) Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%') JustifyContentFlex({ justifyContent: FlexAlign.End }) Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%') JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween }) Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%') JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround }) Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%') JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly }) }.width('100%').margin({ top: 5 }) }.width('100%') } } ``` ![](figures/flex03.gif) ``` // Example 04 @Component struct AlignItemsFlex { @Prop alignItems : number build() { Flex({ alignItems: this.alignItems }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) } .size({width: '90%', height: 80}) .padding(10) .backgroundColor(0xAFEEEE) } } @Entry @Component struct FlexExample4 { build() { Column() { Column({ space: 5 }) { Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%') AlignItemsFlex({ alignItems: ItemAlign.Auto }) Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') AlignItemsFlex({ alignItems: ItemAlign.Start }) Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') AlignItemsFlex({ alignItems: ItemAlign.Center }) Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%') AlignItemsFlex({ alignItems: ItemAlign.End }) Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%') AlignItemsFlex({ alignItems: ItemAlign.Stretch }) Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%') AlignItemsFlex({ alignItems: ItemAlign.Baseline }) }.width('100%').margin({ top: 5 }) }.width('100%') } } ``` ![](figures/flex04.jpg) ![](figures/flex04-2.gif) ``` // Example 05 @Component struct AlignContentFlex { @Prop alignContent: number build() { Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) { Text('1').width('50%').height(20).backgroundColor(0xF5DEB3) Text('2').width('50%').height(20).backgroundColor(0xD2B48C) Text('3').width('50%').height(20).backgroundColor(0xD2B48C) } .size({ width: '90%', height: 90 }) .padding(10) .backgroundColor(0xAFEEEE) } } @Entry @Component struct FlexExample5 { build() { Column() { Column({ space: 5 }) { Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') AlignContentFlex({ alignContent: FlexAlign.Start }) Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') AlignContentFlex({ alignContent: FlexAlign.Center }) Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%') AlignContentFlex({ alignContent: FlexAlign.End }) Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%') AlignContentFlex({ alignContent: FlexAlign.SpaceBetween }) Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%') AlignContentFlex({ alignContent: FlexAlign.SpaceAround }) Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%') AlignContentFlex({ alignContent: FlexAlign.SpaceEvenly }) }.width('100%').margin({ top: 5 }) }.width('100%') } } ``` ![](figures/flex05.gif)