1e41f4b71Sopenharmony_ci# Flex Layout Performance Improvement 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciThe **\<Flex>** component is a container whose child elements are automatically laid out to create a flexible layout. By default, the child elements are arranged along the main axis. The size of a child element on the main axis is called its main axis size. 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ciWhen you are using the **\<Flex>** container, note that the layout performance may drop in scenarios where child elements expand or shrink as required in a second layout to fit in the container. This can happen when child elements are laid out on a single line and their total main axis size does not equal the main axis size of the container. For example, when a 500 px wide container houses three 200 px wide child elements: After the first and second child elements are laid out, you need to set the [flexShrink](../reference/arkui-ts/ts-universal-attributes-flex-layout.md) attribute for the second and third child elements to fully display the third child element. In this case, the second child element will be laid out again, reducing the layout efficiency. 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci## Scenario 1 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ciThe child elements in the flex container do not have the [displayPriority](../reference/arkui-ts/ts-universal-attributes-layout-constraints.md) or [layoutWeight](../reference/arkui-ts/ts-universal-attributes-flex-layout.md) attribute set, or have the attributes at their default settings. In this scenario, after the first layout of the child elements is completed: 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ci 15e41f4b71Sopenharmony_ci- If the total main axis size of the child elements is equal to the main axis size of the container, no second layout is required. 16e41f4b71Sopenharmony_ci 17e41f4b71Sopenharmony_ci  18e41f4b71Sopenharmony_ci 19e41f4b71Sopenharmony_ci- If the total main axis size of the child elements is less than the main axis size of the container, those child elements that have a valid [flexGrow](../reference/arkui-ts/ts-universal-attributes-flex-layout.md) value will trigger second layout and expand to fill additional available space. 20e41f4b71Sopenharmony_ci 21e41f4b71Sopenharmony_ci  22e41f4b71Sopenharmony_ci 23e41f4b71Sopenharmony_ci- If the total main axis size of the child elements is greater than the main axis size of the container, those child elements that have a valid **flexShrink** value will trigger second layout and shrink to fit into smaller space. 24e41f4b71Sopenharmony_ci  25e41f4b71Sopenharmony_ci 26e41f4b71Sopenharmony_ci 27e41f4b71Sopenharmony_ci## Scenario 2 28e41f4b71Sopenharmony_ci 29e41f4b71Sopenharmony_ciThe child elements in the flex container have **displayPriority** set, but not **layoutWeight**. 30e41f4b71Sopenharmony_ci 31e41f4b71Sopenharmony_ci 32e41f4b71Sopenharmony_ciIn this scenario, the child elements are laid out by group in descending order of the **displayPriority** values, with those sharing the same **displayPriority** value in the same group. When the total main axis size of the child elements reaches the maximum and does not exceed the main axis size of the container, child elements that have not been laid out and have the smallest **displayPriority** value will be discarded (a set of child elements with critical **displayPriority** values may be laid out but still be discarded). After the first layout of the child elements is completed: 33e41f4b71Sopenharmony_ci 34e41f4b71Sopenharmony_ci 35e41f4b71Sopenharmony_ci- If the total main axis size of the child elements is equal to the main axis size of the container, no second layout is required. 36e41f4b71Sopenharmony_ci  37e41f4b71Sopenharmony_ci 38e41f4b71Sopenharmony_ci- If the total main axis size of the child elements is less than the main axis size of the container, those child elements that have a valid **flexGrow** value will trigger second layout and expand to fill additional available space. 39e41f4b71Sopenharmony_ci  40e41f4b71Sopenharmony_ci 41e41f4b71Sopenharmony_ci 42e41f4b71Sopenharmony_ci## Scenario 3 43e41f4b71Sopenharmony_ci 44e41f4b71Sopenharmony_ciSome child elements in the flex container have **layoutWeight** set. 45e41f4b71Sopenharmony_ci 46e41f4b71Sopenharmony_ciIn this scenario, the child elements whose **displayPriority** values are the same and whose **layoutWeight** attribute is not set are laid out in descending order of the **displayPriority** values. When the total main axis size of the child elements exceeds the main axis size of the container, child elements that have not been laid out and have the smallest **displayPriority** value will be discarded. A set of child elements with critical **displayPriority** values may be laid out but still be discarded. 47e41f4b71Sopenharmony_ci 48e41f4b71Sopenharmony_ci 49e41f4b71Sopenharmony_ciThe remaining space in the container is filled by the child elements whose **layoutWeight** attribute is set. 50e41f4b71Sopenharmony_ci 51e41f4b71Sopenharmony_ci 52e41f4b71Sopenharmony_ci- All the child elements are laid out only once in this process, and second layout is not triggered. 53e41f4b71Sopenharmony_ci  54e41f4b71Sopenharmony_ci 55e41f4b71Sopenharmony_ci 56e41f4b71Sopenharmony_ci## How to Optimize Flex Layout Performance 57e41f4b71Sopenharmony_ci 58e41f4b71Sopenharmony_ci- Use **\<Column>** and **\<Row>** instead of **\<Flex>**. 59e41f4b71Sopenharmony_ci 60e41f4b71Sopenharmony_ci- Set the **flexShrink** attribute of child components whose size does not need to be changed to **0**. 61e41f4b71Sopenharmony_ci 62e41f4b71Sopenharmony_ci- Prioritize the **layoutWeight** attribute over the **flexGrow** and **flexShrink** attributes. 63e41f4b71Sopenharmony_ci 64e41f4b71Sopenharmony_ci- Use the most common layout result so that the total main axis length of child components is equal to the main axis length of the **\<Flex>** container. 65
