1e41f4b71Sopenharmony_ci# Atomic Layout
2e41f4b71Sopenharmony_ci
3e41f4b71Sopenharmony_ciThe atomic layout implements adaptive layout for screens of different sizes and types. Designers can use the atomic layout to define adaptive rules for components on UIs of different widgets. Developers can use the atomic layout to implement the adaptive UI features matching the design effect for a variety of screens.
4e41f4b71Sopenharmony_ci
5e41f4b71Sopenharmony_ci
6e41f4b71Sopenharmony_ci>  **NOTE**
7e41f4b71Sopenharmony_ci>
8e41f4b71Sopenharmony_ci>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
9e41f4b71Sopenharmony_ci
10e41f4b71Sopenharmony_ci
11e41f4b71Sopenharmony_ci## Hiding Components
12e41f4b71Sopenharmony_ci
13e41f4b71Sopenharmony_ciYou can set priority flags for a flex layout that does not support cross-row display to define the display priorities for components in the horizontal or vertical direction. The components are hidden based on available space of the container.
14e41f4b71Sopenharmony_ci
15e41f4b71Sopenharmony_ci| Style           | Type    | Default Value | Description                                      |
16e41f4b71Sopenharmony_ci| ------------- | ------ | ---- | ---------------------------------------- |
17e41f4b71Sopenharmony_ci| display-index | number | 0    | When the space of a container on the flex main axis is insufficient to display all content, the child components are hidden in ascending order of their **display-index** values. Child components with the same **display-index** value are hidden at the same time. The default value of this style is **0**, indicating that the child component is hidden. This style is applicable to child components in a container that supports flex layout, such as **\<div>**. |
18e41f4b71Sopenharmony_ci
19e41f4b71Sopenharmony_ci
20e41f4b71Sopenharmony_ci## Proportion
21e41f4b71Sopenharmony_ci
22e41f4b71Sopenharmony_ciIn a flex layout that does not support cross-row display, components with the proportion style configured are always arranged with the set proportions in the container.
23e41f4b71Sopenharmony_ci
24e41f4b71Sopenharmony_ci| Style         | Type    | Default Value | Description                                      |
25e41f4b71Sopenharmony_ci| ----------- | ------ | ---- | ---------------------------------------- |
26e41f4b71Sopenharmony_ci| flex-weight | number | -    | Size weight of the component on the flex main axis. Component size = Container main axis size x flex-weight / Sum of all component size weights. This style takes effect only when it is set for all components in the container.|
27e41f4b71Sopenharmony_ci
28e41f4b71Sopenharmony_ci
29e41f4b71Sopenharmony_ci## Fixed Ratio
30e41f4b71Sopenharmony_ci
31e41f4b71Sopenharmony_ciA component with fixed ratio can be scaled up and down while retaining its aspect ratio.
32e41f4b71Sopenharmony_ci
33e41f4b71Sopenharmony_ci| Style          | Type    | Default Value | Description                                      |
34e41f4b71Sopenharmony_ci| ------------ | ------ | ---- | ---------------------------------------- |
35e41f4b71Sopenharmony_ci| aspect-ratio | number | -    | Aspect ratio of the component. The value is a floating-point value greater than 0.<br>The value is subjective to the upper and lower limits of the component size.<br>In a flex layout, the main axis size is adjusted first, based on which the cross axis size is adjusted.|
36