| width | \<length> \|\<percentage> | - | Component width.<br>If this attribute is not set, the width required for the element content is used.<br> |
| height | \<length> \|\<percentage> | - | Component height.<br>If this attribute is not set, the height required for the element content is used.<br> |
| max-width<sup>5+</sup> | \<length> \|\<percentage><sup>6+</sup> | - | Maximum component width, which has no restriction by default. |
| max-height<sup>5+</sup> | \<length> \|\<percentage><sup>6+</sup> | - | Maximum component height, which has no restriction by default. |
| padding | \<length> \|\<percentage><sup>5+</sup> | 0 | Shorthand attribute to set the padding for all sides in a declaration.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[start\|end] | \<length> \|\<percentage><sup>5+</sup> | 0 | Start and end padding. |
| margin | \<length> \|\<percentage><sup>5+</sup> | 0 | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[start\|end] | \<length> \|\<percentage><sup>5+</sup> | 0 | Start and end margins. |
| border | - | 0 | Shorthand attribute to set all borders. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| border-style | string | solid | Shorthand attribute to set the style for all borders. Available values are as follows:<br>- **dotted**: dotted border. The radius of a dot is half of **border-width**.<br>- **dashed**: dashed border.<br>- **solid**: solid border.|
| border-[left\|top\|right\|bottom]-style | string | solid | Styles of the left, top, right, and bottom borders. The available values are **dotted**, **dashed**, and **solid**.|
| border-[left\|top\|right\|bottom] | - | - | Shorthand attribute to set the borders for every side respectively. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| border-width | \<length> | 0 | Shorthand attribute to set the width for all borders, or separately set the width for each border. |
| border-[left\|top\|right\|bottom]-width | \<length> | 0 | Attribute to set widths of left, top, right, and bottom borders. |
| border-color | \<color> | black | Shorthand attribute to set the color for all borders, or separately set the color for each border. |
| border-[left\|top\|right\|bottom]-color | \<color> | black | Attribute to set colors for left, top, right, and bottom borders. |
| border-radius | \<length> | - | Attribute to set the radius for round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set **border-width**, **border-color**, or **border-style** for all the borders at the same time.<br>In the four-value syntax, the values apply to lower-left corner, lower-right corner, upper-left corner, and upper-right corner, respectively.|
| border-[top\|bottom]-[left\|right]-radius | \<length> | - | Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners |
| background | \<linear-gradient> | - | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.|
| background-image | string | - | Background image. Both online and local image resources are supported. Currently, this attribute is not compatible with **background-color** or **background**.<br>Example:<br>- background-image: url("/common/background.png")<br>The SVG format is not supported.|
| background-size | - string<br>- \<length> \<length><br>- \<percentage> \<percentage> | auto | Background image size.<br>- The **string** values are as follows:<br> - **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.<br> - **cover**: Extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br> - **auto**: Retains the original aspect ratio of the image.<br>- The two **<length>** values are as follows:<br> Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>- The two **<percentage>** values are as follows:<br> Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.|
| background-repeat | string | repeat | How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.<br>- **repeat**: The image is repeated along the x-axis and y-axis at the same time.<br>- **repeat-x**: The image is repeated along the x-axis.<br>- **repeat-y**: The image is repeated along the y-axis.<br>- **no-repeat**: The image is not repeated.|
| background-position | - string string<br>- \<length> \<length><br>- \<percentage> \<percentage> | 0px 0px | - Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br> - **left**: leftmost in the horizontal direction.<br> - **right**: rightmost in the horizontal direction.<br> - **top**: top in the vertical direction.<br> - **bottom**: bottom in the vertical direction.<br> - **center**: center position.<br>- Using **<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.<br>- Using **\<percentage>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br>- Using both **\<percentage>** and **\<length>**. |
| box-shadow<sup>5+</sup> | string | 0 | Syntax: **box-shadow: h-shadow v-shadow blur spread color**<br>Shadow style of the current component. The value includes the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: **0**), extension distance (optional, default value: **0**), and color (optional, default value: **black**) of the shadow.<br>Example:<br>- box-shadow :10px 20px 5px 10px \#888888<br>- box-shadow :100px 100px 30px red<br>- box-shadow :-100px -100px 0px 40px |
| filter<sup>5+</sup> | string | - | Syntax: **filter: blur(px)**<br>Radius of the blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.<br>Example:<br>- filter: blur(10px) |
| backdrop-filter<sup>5+</sup> | string | - | Syntax: **backdrop-filter: blur(px)**<br>Radius of the background blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.<br>Example:<br>- backdrop-filter: blur(10px) |
| window-filter<sup>5+</sup> | string | - | Syntax: window-filter: blur(percent), style<sup>5+</sup><br>Blur degree and style for windows within the component layout. If this style is not set, the default value **0%** (no blur area) is used. Different blur degrees and styles for multiple blur areas are not supported. Available blur styles are as follows: **small_light** (default value), **medium_light**, **large_light**, **xlarge_light**, **small_dark**, **medium_dark**, **large_dark**, and **xlarge_dark**.<br>Example:<br>- window-filter: blur(50%)<br>- window-filter: blur(10%), large_light |
| opacity | number | 1 | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| display | string | flex | Type of the box containing an element. Available values are as follows:<br>- **flex**: Flexible layout.<br>- **none**: The box is disabled.<br>- **inline**<sup>9+</sup>: Inline box, where the element is displayed as an inline element and does not start on a new line.<br>- **block**<sup>9+</sup>: Block box, where the element is displayed as a block-level element and always starts on a new line. This is the default value for container components.<br>- **inline-block**<sup>9+</sup>: Inline-block box, where the element is displayed on one line and you can set a width and height on the element. This is the default value for basic components.|
| visibility | string | visible | Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the **display** attribute to **none**.) Available values are as follows:<br>- **visible**: The element is visible.<br>- **hidden**: The box is hidden but still takes up space.<br>If both **visibility** and **display** are set, only **display** takes effect.|
| flex | number \| string | - | How to divide available space of the parent component for each child component.<br>You can set one, two<sup>5+</sup>, or three<sup>5+</sup> values for this style.<br>Set one value in either of the following ways:<br>- A unitless number to set **flex-grow**.<br>- A valid width value<sup>5+</sup> to set **flex-basis**.<br>Set two values<sup>5+</sup> in the following ways:<br>The first value must be a unitless number used to set **flex-grow**. The second value must be either of the following:<br>- A unitless number to set **flex-shrink**.<br>- A valid width value to set **flex-basis**.<br>Set three values<sup>5+</sup> in the following ways:<br>The first value must be a unitless number used to set **flex-grow**. The second value must be a unitless number used to set **flex-shrink**. The third value must be a valid width value used to set **flex-basis**.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-grow | number | 0 | How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value **0** indicates that the child component does not grow.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-shrink | number | 1 | How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value **0** indicates that the child component does not shrink.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-basis | \<length> | - | Initial length of the flex item on the main axis.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| align-self<sup>6+</sup> | string | - | Alignment mode on the cross axis of the parent element. This style overwrites the align-items style of the parent element. The align-items style is used only in the div and list styles of the parent container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.<br>- **baseline**: Items are aligned on the peracross axis.|
| position | string | relative | Positioning type of an element. Dynamic changes are not supported.<br>- **fixed**: The element is positioned related to the browser window.<br>- **absolute**: The element is positioned absolutely to its parent element. The setting takes effect only when the parent component is **\<div>** or **\<stack>**.<br>- **relative**: The element is positioned relative to its normal position.|
| [left\|top\|right\|bottom] | \<length> \|\<percentage><sup>6+</sup> | - | **left | top | right | bottom** must be used together with **position** to determine the offset of an element.<br/>- The **left** attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br/>- The **top** attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.<br/>- The **right** attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.<br/>- The **bottom** attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. |
| [start \| end]<sup>6+</sup> | \<length> \|\<percentage> | - | **start | end** must be used together with **position** to determine the offset of an element.<br/>- The **start** attribute specifies the start edge position of the element. This attribute defines the offset between the start edge of a positioned element and that of a block included in the element.<br/>- The **end** attribute specifies the end edge position of the element. This attribute defines the offset between the end edge of a positioned element and that of a block included in the element. |
| z-index<sup>6+</sup> | number | - | Rendering sequence of child nodes under the same parent node. A child node with a larger value will be rendered later.<br>z-index does not support auto, and other styles such as opacity do not affect the rendering sequence of z-index.|
| image-fill<sup>6+</sup> | \<color> | - | Fill color for SVG images. The following components are supported: **button** (icon attribute), **piece** (icon attribute), **search** (icon attribute), **input** (headericon attribute), **textarea** (headericon attribute), **image** (src attribute), and **toolbar-item** (icon attribute)<br>The **fill** color value in the SVG image file is replaced with the value of **image-fill** during rendering, and is valid only for the fill attribute that is declared in the SVG image.|
| clip-path<sup>6+</sup> | [ \<geometry-box> \|\|\<basic-shape> ] \| none | - | Clip area of a component. Only the content within this area is displayed.<br>**\<geometry-box>**: applicable scope of the clip area's width and height. The default value is **border-box**. Available values are as follows:<br>- **margin-box**: The width and height includes the margin.<br>- **border-box**: The width and height includes the border.<br>- **padding-box**: The width and height includes the padding.<br>- **content-box**: The width and height does not include any margin, border, or padding.<br>- **\<basic-shape>**: shape of the clip area. Available values include:<br>- **inset**, in the format of inset( \<percentage>{1,4} [ round \<'border-radius'> ]? ).<br>- **circle**, in the format of circle( [ \<percentage> ]? [ at \<percentage> \<percentage> ]? ).<br>- **ellipse**, in the format of ellipse( [ \<percentage>{2} ]? [ at \<percentage> \<percentage> ]? ).<br>- **polygon**, in the format of polygon( [ \<percentage> \<percentage> ]\# ).<br>- **path**, in the format of path( \<string> ).|
| mask-image<sup>6+</sup> | - \<linear-gradient><br>- string | - | Image used for the mask of a component:<br>Gradient color mask, for example:<br>linear-gradient(to left, black, white)<br>Solid color mask, for example:<br>linear-gradient(to right, grey , grey)<br>Mask filled by a local SVG image, for example, **url(common/mask.svg)**|
| mask-size<sup>6+</sup> | - string<br>- \<length>\<length><br>- \<percentage> \<percentage> | auto | Display size of the mask image. The setting is valid only when **mask-image** is set to an image source.<br>The **string** values are as follows:<br>- **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.<br>- **cover**: Extends the image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br>- **auto**: Retains the original aspect ratio of the image.<br>The two **<length>** values are as follows: The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>The two **<percentage>** values indicate the image size in relative to the original image size. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.|
| mask-position<sup>6+</sup> | - string string<br>- \<length> \<length><br>- \<percentage> \<percentage> | 0px 0px | Display position of the mask image. The setting is valid only when **mask-image** is set to an image source. Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br>The **string** values are as follows:<br>- **left**: leftmost in the horizontal direction.<br>- **right**: rightmost in the horizontal direction.<br>- **top**: top in the vertical direction.<br>- **bottom**: bottom in the vertical direction.<br>- **center**: center position.<br>Using **\<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.<br>Using **\<percentage>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br>Using both **\<percentage>** and **\<length>**.|
| border-image-source<sup>7+</sup> | string | - | Border image of the specified element.<br>Example:<br>border-image-source: url("/common/images/border.png") |
| border-image-slice<sup>7+</sup> | \<length> \|\<percentage> | 0 | Padding of the image.<br>The attribute can have one to four values:<br>If you set only one value, it specifies the padding for four sides.<br>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| border-image-width<sup>7+</sup> | \<length> \|\<percentage> | 0 | Width of the border image.<br>If you set only one value, it specifies the width for four sides.<br>If you set two values, the first value specifies the top and bottom width, and the second value specifies the left and right width.<br>If you set three values, the first value specifies the top width, the second value specifies the left and right width, and the third value specifies the bottom width.<br>If you set four values, they respectively specify the width for top, right, bottom, and left sides (in clockwise order).|
| border-image-outset<sup>7+</sup> | \<length> \|\<percentage> | 0 | How far the border image can extend beyond the border box.<br>If you set only one value, it specifies the distance of the boarder image beyond the border on four sides.<br>If you set two values, the first value specifies the distance of the boarder image's top and bottom sides beyond the boarder, and the second value specifies the distance of the boarder image's left and right sides beyond the boarder.<br>If you set three values, the first value specifies the distance of the boarder image's top side beyond the boarder, the second value specifies the distance of the boarder image's left and right sides beyond the boarder, and the third value specifies the distance of the boarder image's bottom side beyond the boarder.<br>If you set four values, they respectively specify the distance of the boarder image's top, right, bottom, and left sides beyond the boarder (in clockwise order).|
| border-image-repeat<sup>7+</sup> | string | stretch | How the border image fills the border box.<br>**stretch**: stretches the image to fill the border box.<br>**repeat**: tiles the image to fill the border box.<br>**round**: tiles the image to fill the border box. When the image cannot be tiled for an integer number of times, it can be scaled based on the site requirements.<br>|
| border-image<sup>7+</sup> | string | - | Shorthand attribute. The options are as follows:<br>- Attributes of the image border. The parameters include **border-image-source**, **border-image-slice**, **border-image-width**, **border-image-outset**, and **border-image-repeat**, respectively meaning the padding, width of the border image, how far the border image can extend beyond the border box, and how the border image fills the border box. The default values are used if the parameters are not set.<br>- Gradient color border.<br> Example:<br> border-image: linear-gradient(red, yellow) 10px |
| box-sizing<sup>9+</sup> | string | border-box | Border type of the component.<br>**content-box**: standard box. Its width and height contain only the width and height of the content, and does not include the border and padding.<br>**border-box**: The width and height include the content, border, and padding, that is, the actual width of the component content area = width - (border + padding).|
<pid="p84811050134010"><aname="p84811050134010"></a><aname="p84811050134010"></a>If this attribute is not set, the width required for the element content is used. </p>
<pid="p208761554184020"><aname="p208761554184020"></a><aname="p208761554184020"></a>If this length attribute is not set, the length required for the element content is used. </p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p19378203513216"><aname="p19378203513216"></a><aname="p19378203513216"></a>Maximum component width, which has no restriction by default</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p23781235203214"><aname="p23781235203214"></a><aname="p23781235203214"></a>Maximum component height, which has no restriction by default</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p157435053316"><aname="p157435053316"></a><aname="p157435053316"></a>Shorthand attribute to set all padding attributes.</p>
<divclass="p"id="a68a6d5ddc59c49f0aaddd82e75932524"><aname="a68a6d5ddc59c49f0aaddd82e75932524"></a><aname="a68a6d5ddc59c49f0aaddd82e75932524"></a>The attribute can have one to four values:<aname="ul15202134923211"></a><aname="ul15202134923211"></a><ulid="ul15202134923211"><li><pid="p10614155353215"><aname="p10614155353215"></a><aname="p10614155353215"></a>If you set only one value, it specifies the padding for four sides.</p>
</li><li><pid="p10614175393216"><aname="p10614175393216"></a><aname="p10614175393216"></a>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.</p>
</li><li><pid="p8614205393214"><aname="p8614205393214"></a><aname="p8614205393214"></a>If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.</p>
</li><li><pid="p106141853193215"><aname="p106141853193215"></a><aname="p106141853193215"></a>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a3575ab240d384ab1a21119ea3428ab7d"><aname="a3575ab240d384ab1a21119ea3428ab7d"></a><aname="a3575ab240d384ab1a21119ea3428ab7d"></a>Left, top, right, and bottom padding (in px).</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p1269184753610"><aname="p1269184753610"></a><aname="p1269184753610"></a>Start and end padding.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a1d350e36a773420baf5ebb930cd5ad66"><aname="a1d350e36a773420baf5ebb930cd5ad66"></a><aname="a1d350e36a773420baf5ebb930cd5ad66"></a>Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:</p>
<aname="ul5333133311105"></a><aname="ul5333133311105"></a><ulid="ul5333133311105"><li><pid="p03345339103"><aname="p03345339103"></a><aname="p03345339103"></a>If you set only one value, it specifies the margin for all the four sides.</p>
</li><li><pid="p1133420334108"><aname="p1133420334108"></a><aname="p1133420334108"></a>If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.</p>
</li><li><pid="p193341533191015"><aname="p193341533191015"></a><aname="p193341533191015"></a>If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.</p>
</li><li><pid="p733412334102"><aname="p733412334102"></a><aname="p733412334102"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p1049212715388"><aname="p1049212715388"></a><aname="p1049212715388"></a>Start and end margins.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a9cd962871a4c467a8e1ef452621d5cd7"><aname="a9cd962871a4c467a8e1ef452621d5cd7"></a><aname="a9cd962871a4c467a8e1ef452621d5cd7"></a>Shorthand attribute to set all borders. You can set <strongid="b79128342503"><aname="b79128342503"></a><aname="b79128342503"></a>border-width</strong>, <strongid="b9366173919505"><aname="b9366173919505"></a><aname="b9366173919505"></a>border-style</strong>, and <strongid="b184351248205019"><aname="b184351248205019"></a><aname="b184351248205019"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p342285712314"><aname="p342285712314"></a><aname="p342285712314"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p>
<aname="ul1470834505612"></a><aname="ul1470834505612"></a><ulid="ul1470834505612"><li><strongid="b143453286360"><aname="b143453286360"></a><aname="b143453286360"></a>dotted</strong>: dotted border. The radius of a dot is half of border-width.</li><li><strongid="b792117280367"><aname="b792117280367"></a><aname="b792117280367"></a>dashed</strong>: dashed border.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p595353718719"><aname="p595353718719"></a><aname="p595353718719"></a>Styles of the left, top, right, and bottom borders. The available values are <strongid="b17769171311540"><aname="b17769171311540"></a><aname="b17769171311540"></a>dotted</strong>, <strongid="b237141519547"><aname="b237141519547"></a><aname="b237141519547"></a>dashed</strong>, and <strongid="b8949161613540"><aname="b8949161613540"></a><aname="b8949161613540"></a>solid</strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="af4178a066c344412afbd38f4b0c44818"><aname="af4178a066c344412afbd38f4b0c44818"></a><aname="af4178a066c344412afbd38f4b0c44818"></a>Shorthand attribute to set the borders for every side respectively. You can set <strongid="b122415514554"><aname="b122415514554"></a><aname="b122415514554"></a>border-width</strong>, <strongid="b12296178135513"><aname="b12296178135513"></a><aname="b12296178135513"></a>border-style</strong>, and <strongid="b1129701210553"><aname="b1129701210553"></a><aname="b1129701210553"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a7ae60621ea3341818a03bfdffa641894"><aname="a7ae60621ea3341818a03bfdffa641894"></a><aname="a7ae60621ea3341818a03bfdffa641894"></a>Shorthand attribute to set the width of all borders<spanid="ph07997369365"><aname="ph07997369365"></a><aname="ph07997369365"></a>, or separately set the width of each border</span>.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a20386e66c3834d5f96cf9435c4715c5b"><aname="a20386e66c3834d5f96cf9435c4715c5b"></a><aname="a20386e66c3834d5f96cf9435c4715c5b"></a>Attribute to set widths of left, top, right, and bottom borders.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a76fd98995e1d4217aa703fecd69325c7"><aname="a76fd98995e1d4217aa703fecd69325c7"></a><aname="a76fd98995e1d4217aa703fecd69325c7"></a>Shorthand attribute to set the color of all borders<spanid="ph9587639113619"><aname="ph9587639113619"></a><aname="ph9587639113619"></a>, or separately set the color of each border</span>.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a5c85947d388c4c7fbf0de07b022bb44e"><aname="a5c85947d388c4c7fbf0de07b022bb44e"></a><aname="a5c85947d388c4c7fbf0de07b022bb44e"></a>Attribute to set colors of left, top, right, and bottom borders.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a52ca834f42124d3b8b12bbf54914fc96"><aname="a52ca834f42124d3b8b12bbf54914fc96"></a><aname="a52ca834f42124d3b8b12bbf54914fc96"></a>Attribute to set the radius of round borders of an element. <spanid="ph1249443123611"><aname="ph1249443123611"></a><aname="ph1249443123611"></a>This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set <strongid="b124211434362"><aname="b124211434362"></a><aname="b124211434362"></a>border-width</strong>, <strongid="b124894383615"><aname="b124894383615"></a><aname="b124894383615"></a>border-color</strong>, or <strongid="b7166134516465"><aname="b7166134516465"></a><aname="b7166134516465"></a>border-style</strong> for all the borders at the same time.</span></p>
<divclass="note"id="note037175915196"><aname="note037175915196"></a><aname="note037175915196"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p123711759171916"><aname="p123711759171916"></a><aname="p123711759171916"></a>In the four-value syntax, the values apply to lower-left corner, lower-right corner, upper-left corner, and upper-right corner, respectively.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a63757091a86c4ced97f0c39d37a2117c"><aname="a63757091a86c4ced97f0c39d37a2117c"></a><aname="a63757091a86c4ced97f0c39d37a2117c"></a>Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a1d2985ee819d4cfd87861080354def51"><aname="a1d2985ee819d4cfd87861080354def51"></a><aname="a1d2985ee819d4cfd87861080354def51"></a>This attribute supports <ahref="js-components-common-gradient.md">Gradient Styles</a> only but is not compatible with <strongid="b389373419292"><aname="b389373419292"></a><aname="b389373419292"></a>background-color</strong> or <strongid="b0399637142918"><aname="b0399637142918"></a><aname="b0399637142918"></a>background-image</strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a24de29e3cb4d476fabe55d48d69350a8"><aname="a24de29e3cb4d476fabe55d48d69350a8"></a><aname="a24de29e3cb4d476fabe55d48d69350a8"></a>Background image. Currently, this attribute is not compatible with <strongid="b17699154763620"><aname="b17699154763620"></a><aname="b17699154763620"></a>background-color</strong> or <strongid="b87001647163613"><aname="b87001647163613"></a><aname="b87001647163613"></a>background</strong>. Local image resources are supported.</p>
<aname="ul11766913172513"></a><aname="ul11766913172513"></a><ulid="ul11766913172513"><li>background-image: url("/common/background.png")<divclass="note"id="note959971405014"><aname="note959971405014"></a><aname="note959971405014"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p16599191445013"><aname="p16599191445013"></a><aname="p16599191445013"></a>The SVG format is not supported.</p>
<aname="ul41331853154111"></a><aname="ul41331853154111"></a><ulid="ul41331853154111"><li>The <strongid="b1229715499365"><aname="b1229715499365"></a><aname="b1229715499365"></a>string</strong> values are as follows:<aname="ul13611494111"></a><aname="ul13611494111"></a><ulid="ul13611494111"><li><strongid="b4759749163610"><aname="b4759749163610"></a><aname="b4759749163610"></a>contain</strong>: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.</li><li><strongid="b437619381712"><aname="b437619381712"></a><aname="b437619381712"></a>cover</strong>: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.</li><li><strongid="b1425512535366"><aname="b1425512535366"></a><aname="b1425512535366"></a>auto</strong>: The original image width-height ratio is retained.</li></ul>
</li><li>The two <strongid="b13309145193614"><aname="b13309145193614"></a><aname="b13309145193614"></a><length></strong> values are as follows:<pid="p1840244924418"><aname="p1840244924418"></a><aname="p1840244924418"></a>Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strongid="b146661156143617"><aname="b146661156143617"></a><aname="b146661156143617"></a>auto</strong> by default.</p>
</li><li>The two <strongid="b1667415763613"><aname="b1667415763613"></a><aname="b1667415763613"></a><percentage></strong> values are as follows:<pid="p17936154410457"><aname="p17936154410457"></a><aname="p17936154410457"></a>Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strongid="b1290500147"><aname="b1290500147"></a><aname="b1290500147"></a>auto</strong> by default.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="afb8e41c117884b368a0f1df348be8e54"><aname="afb8e41c117884b368a0f1df348be8e54"></a><aname="afb8e41c117884b368a0f1df348be8e54"></a>How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.</p>
<aname="ul8236153103612"></a><aname="ul8236153103612"></a><ulid="ul8236153103612"><li><strongid="b1363463710"><aname="b1363463710"></a><aname="b1363463710"></a>repeat</strong>: Repeatedly draws images along the x-axis and y-axis at the same time.</li><li><strongid="b267416916377"><aname="b267416916377"></a><aname="b267416916377"></a>repeat-x</strong>: Repeatedly draws images along the x-axis.</li><li><strongid="b625561011379"><aname="b625561011379"></a><aname="b625561011379"></a>repeat-y</strong>: Repeatedly draws images along the y-axis.</li><li><strongid="b1122181133715"><aname="b1122181133715"></a><aname="b1122181133715"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><aname="ul1590812103363"></a><aname="ul1590812103363"></a><ulid="ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strongid="b5234102011540"><aname="b5234102011540"></a><aname="b5234102011540"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<aname="ul1453531734716"></a><aname="ul1453531734716"></a><ulid="ul1453531734716"><li><strongid="b0982111273712"><aname="b0982111273712"></a><aname="b0982111273712"></a>left</strong>: leftmost in the horizontal direction</li><li><strongid="b866713583912"><aname="b866713583912"></a><aname="b866713583912"></a>right</strong>: rightmost in the horizontal direction</li><li><strongid="b5886013193716"><aname="b5886013193716"></a><aname="b5886013193716"></a>top</strong>: top in the vertical direction</li><li><strongid="b84197142376"><aname="b84197142376"></a><aname="b84197142376"></a>bottom</strong>: bottom in the vertical direction</li><li><strongid="b14894114103710"><aname="b14894114103710"></a><aname="b14894114103710"></a>center</strong>: center position</li></ul>
</li></ul>
<aname="ul10908121023615"></a><aname="ul10908121023615"></a><ulid="ul10908121023615"><li>Using <strongid="b11401615193715"><aname="b11401615193715"></a><aname="b11401615193715"></a><length></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strongid="b1341381819379"><aname="b1341381819379"></a><aname="b1341381819379"></a>0 0</strong> indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is <strongid="b48671516183714"><aname="b48671516183714"></a><aname="b48671516183714"></a>50%</strong>.</li><li>Using <strongid="b5492717163712"><aname="b5492717163712"></a><aname="b5492717163712"></a><percentage></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strongid="b164741723183712"><aname="b164741723183712"></a><aname="b164741723183712"></a>0% 0%</strong> indicates the upper left corner. <strongid="b64022245377"><aname="b64022245377"></a><aname="b64022245377"></a>100% 100%</strong> indicates the lower right corner. If only one value is specified, the other one is <strongid="b7893424163718"><aname="b7893424163718"></a><aname="b7893424163718"></a>50%</strong>.</li><li>Using both <strongid="b154811725193718"><aname="b154811725193718"></a><aname="b154811725193718"></a><percentage></strong> and <strongid="b34834254377"><aname="b34834254377"></a><aname="b34834254377"></a><length></strong>.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p15549650195115"><aname="p15549650195115"></a><aname="p15549650195115"></a>Shadow style of the current component. The value consists of the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: <strongid="b1191123116548"><aname="b1191123116548"></a><aname="b1191123116548"></a>0</strong>), extension distance (optional, default value: <strongid="b17911331135415"><aname="b17911331135415"></a><aname="b17911331135415"></a>0</strong>), and color (optional, default value: <strongid="b2091173111540"><aname="b2091173111540"></a><aname="b2091173111540"></a>black</strong>) of the shadow.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p18913655131410"><aname="p18913655131410"></a><aname="p18913655131410"></a>Radius of the blur area within the component layout. If the radius is not set, the default value <strongid="b13575134219519"><aname="b13575134219519"></a><aname="b13575134219519"></a>0</strong> (no blur area) is used. Percentage values are not supported.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p31725155158"><aname="p31725155158"></a><aname="p31725155158"></a>Radius of the background blur area within the component layout. If the radius is not set, the default value <strongid="b1321710397598"><aname="b1321710397598"></a><aname="b1321710397598"></a>0</strong> (no background blur) is used. Percentage values are not supported.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p122515161139"><aname="p122515161139"></a><aname="p122515161139"></a>Opacity of an element. The value ranges from <strongid="b1871715526385"><aname="b1871715526385"></a><aname="b1871715526385"></a>0</strong> to <strongid="b177181452103815"><aname="b177181452103815"></a><aname="b177181452103815"></a>1</strong>. The value <strongid="b13718155210380"><aname="b13718155210380"></a><aname="b13718155210380"></a>1</strong> means opaque, and <strongid="b6718152103818"><aname="b6718152103818"></a><aname="b6718152103818"></a>0</strong> means completely transparent.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p23704018414"><aname="p23704018414"></a><aname="p23704018414"></a>How and whether to display the box containing an element. Available values are as follows:</p>
<aname="ul12227103394916"></a><aname="ul12227103394916"></a><ulid="ul12227103394916"><li><strongid="b57468289377"><aname="b57468289377"></a><aname="b57468289377"></a>flex</strong>: flexible layout</li><li><strongid="b18887133293920"><aname="b18887133293920"></a><aname="b18887133293920"></a>none</strong>: The element is hidden.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p1568839154517"><aname="p1568839154517"></a><aname="p1568839154517"></a>Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the <strongid="b15844103015378"><aname="b15844103015378"></a><aname="b15844103015378"></a>display</strong> attribute to <strongid="b4845153013712"><aname="b4845153013712"></a><aname="b4845153013712"></a>none</strong>.) Available values are as follows:</p>
<aname="ul751984164920"></a><aname="ul751984164920"></a><ulid="ul751984164920"><li><strongid="b17429331133711"><aname="b17429331133711"></a><aname="b17429331133711"></a>visible</strong>: The element is visible.</li><li><strongid="b109191231193710"><aname="b109191231193710"></a><aname="b109191231193710"></a>hidden</strong>: The element is hidden but still takes up space.</li></ul>
<divclass="note"id="note4549524649"><aname="note4549524649"></a><aname="note4549524649"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p25499241642"><aname="p25499241642"></a><aname="p25499241642"></a>If both <strongid="b719810016405"><aname="b719810016405"></a><aname="b719810016405"></a>visibility</strong> and <strongid="b187052264018"><aname="b187052264018"></a><aname="b187052264018"></a>display</strong> are set, only <strongid="b107788924011"><aname="b107788924011"></a><aname="b107788924011"></a>display</strong> takes effect.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a11c317cdfa7d4066878d86c6b3bcbd82"><aname="a11c317cdfa7d4066878d86c6b3bcbd82"></a><aname="a11c317cdfa7d4066878d86c6b3bcbd82"></a>How to divide available space of the parent component for each child component.</p>
<pid="p6968144051814"><aname="p6968144051814"></a><aname="p6968144051814"></a>You can set one, two<supid="sup894453017315"><aname="sup894453017315"></a><aname="sup894453017315"></a>5+</sup>, or three<supid="sup1255142393114"><aname="sup1255142393114"></a><aname="sup1255142393114"></a>5+</sup> values for this style.</p>
<pid="p16733313171911"><aname="p16733313171911"></a><aname="p16733313171911"></a>Set one value in either of the following ways:</p>
<aname="ul93371539192211"></a><aname="ul93371539192211"></a><ulid="ul93371539192211"><li>A unitless number to set <strongid="b152581117781"><aname="b152581117781"></a><aname="b152581117781"></a>flex-grow</strong>.</li><li>A valid width value<supid="sup133014373318"><aname="sup133014373318"></a><aname="sup133014373318"></a>5+</sup> to set <strongid="b182101331199"><aname="b182101331199"></a><aname="b182101331199"></a>flex-basis</strong>.</li></ul>
<pid="p6786171632018"><aname="p6786171632018"></a><aname="p6786171632018"></a>Set two values<supid="sup39514502313"><aname="sup39514502313"></a><aname="sup39514502313"></a>5+</sup> in the following ways:</p>
<pid="p6400429122011"><aname="p6400429122011"></a><aname="p6400429122011"></a>The first value must be a unitless number used to set <strongid="b171516283129"><aname="b171516283129"></a><aname="b171516283129"></a>flex-grow</strong>. The second value must be either of the following:</p>
<aname="ul767043502219"></a><aname="ul767043502219"></a><ulid="ul767043502219"><li>A unitless number to set <strongid="b1428375141313"><aname="b1428375141313"></a><aname="b1428375141313"></a>flex-shrink</strong>.</li><li>A valid width value to set <strongid="b1632495651416"><aname="b1632495651416"></a><aname="b1632495651416"></a>flex-basis</strong>.</li></ul>
<pid="p748416351217"><aname="p748416351217"></a><aname="p748416351217"></a>Set three values<supid="sup168671312151514"><aname="sup168671312151514"></a><aname="sup168671312151514"></a>5+</sup> in the following ways:</p>
<pid="p7373204832111"><aname="p7373204832111"></a><aname="p7373204832111"></a>The first value must be a unitless number used to set <strongid="b19419131221612"><aname="b19419131221612"></a><aname="b19419131221612"></a>flex-grow</strong>. The second value must be a unitless number used to set <strongid="b19378733181612"><aname="b19378733181612"></a><aname="b19378733181612"></a>flex-shrink</strong>. The third value must be a valid width value used to set <strongid="b47717118176"><aname="b47717118176"></a><aname="b47717118176"></a>flex-basis</strong>.</p>
<divclass="note"id="note34891253201520"><aname="note34891253201520"></a><aname="note34891253201520"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1248915538152"><aname="p1248915538152"></a><aname="p1248915538152"></a>This style takes effect only when the container is any of the following components: <strongid="b17156153131"><aname="b17156153131"></a><aname="b17156153131"></a><div></strong>, <strongid="b1201415151311"><aname="b1201415151311"></a><aname="b1201415151311"></a><list-item></strong>, <strongid="b72031515132"><aname="b72031515132"></a><aname="b72031515132"></a><refresh></strong>, <strongid="b1920131551310"><aname="b1920131551310"></a><aname="b1920131551310"></a><stepper-item></strong><supid="sup17201815121317"><aname="sup17201815121317"></a><aname="sup17201815121317"></a>5+</sup>, and <strongid="b2211915121313"><aname="b2211915121313"></a><aname="b2211915121313"></a><tabs></strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p4437122419557"><aname="p4437122419557"></a><aname="p4437122419557"></a>How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value <strongid="b1682343583716"><aname="b1682343583716"></a><aname="b1682343583716"></a>0</strong> indicates that the child component does not grow.</p>
<divclass="note"id="note201231734212"><aname="note201231734212"></a><aname="note201231734212"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p184555314553"><aname="p184555314553"></a><aname="p184555314553"></a>This style takes effect only when the container is any of the following components: <strongid="b18575165615499"><aname="b18575165615499"></a><aname="b18575165615499"></a><div></strong>, <strongid="b8575165618495"><aname="b8575165618495"></a><aname="b8575165618495"></a><list-item></strong>, <strongid="b125751756164917"><aname="b125751756164917"></a><aname="b125751756164917"></a><refresh></strong>, <strongid="b15751456104920"><aname="b15751456104920"></a><aname="b15751456104920"></a><stepper-item></strong><supid="sup257595611492"><aname="sup257595611492"></a><aname="sup257595611492"></a>5+</sup>, and <strongid="b55761856114912"><aname="b55761856114912"></a><aname="b55761856114912"></a><tabs></strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="ab032342dfe56460ca742800de482ca0f"><aname="ab032342dfe56460ca742800de482ca0f"></a><aname="ab032342dfe56460ca742800de482ca0f"></a>How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value <strongid="b783242395"><aname="b783242395"></a><aname="b783242395"></a>0</strong> indicates that the child component does not shrink.</p>
<divclass="note"id="note147160917217"><aname="note147160917217"></a><aname="note147160917217"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p844914328577"><aname="p844914328577"></a><aname="p844914328577"></a>This style takes effect only when the container is any of the following components: <strongid="b1168212543127"><aname="b1168212543127"></a><aname="b1168212543127"></a><div></strong>, <strongid="b76821454121211"><aname="b76821454121211"></a><aname="b76821454121211"></a><list-item></strong>, <strongid="b1168255411126"><aname="b1168255411126"></a><aname="b1168255411126"></a><refresh></strong>, <strongid="b10682155415120"><aname="b10682155415120"></a><aname="b10682155415120"></a><stepper-item></strong><supid="sup10683145491215"><aname="sup10683145491215"></a><aname="sup10683145491215"></a>5+</sup>, and <strongid="b1868385461211"><aname="b1868385461211"></a><aname="b1868385461211"></a><tabs></strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a0993ef9b0ef64785a76e6310dd834f09"><aname="a0993ef9b0ef64785a76e6310dd834f09"></a><aname="a0993ef9b0ef64785a76e6310dd834f09"></a>Initial length of the flex item on the main axis.</p>
<divclass="note"id="note62848141222"><aname="note62848141222"></a><aname="note62848141222"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p16711745115718"><aname="p16711745115718"></a><aname="p16711745115718"></a>This style takes effect only when the container is any of the following components: <strongid="b18795155631219"><aname="b18795155631219"></a><aname="b18795155631219"></a><div></strong>, <strongid="b107951056121217"><aname="b107951056121217"></a><aname="b107951056121217"></a><list-item></strong>, <strongid="b2795105619128"><aname="b2795105619128"></a><aname="b2795105619128"></a><refresh></strong>, <strongid="b1579510564126"><aname="b1579510564126"></a><aname="b1579510564126"></a><stepper-item></strong><supid="sup187953565122"><aname="sup187953565122"></a><aname="sup187953565122"></a>5+</sup>, and <strongid="b11796456201211"><aname="b11796456201211"></a><aname="b11796456201211"></a><tabs></strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p18535328478"><aname="p18535328478"></a><aname="p18535328478"></a>Alignment mode on the cross axis of the parent element. This style overwrites the align-items style of the parent element. The align-items style is used only in the div and list styles of the parent container. Text alignment mode. Available values include:</p>
<aname="ul16801138134811"></a><aname="ul16801138134811"></a><ulid="ul16801138134811"><li><strongid="b83231255613"><aname="b83231255613"></a><aname="b83231255613"></a>stretch</strong>: Items are stretched to the same height or width as the container in the cross axis direction.</li><li><strongid="b63541297143"><aname="b63541297143"></a><aname="b63541297143"></a>flex-start</strong>: Items are aligned to the start of the cross axis.</li><li><strongid="b08443191414"><aname="b08443191414"></a><aname="b08443191414"></a>flex-end</strong>: Items are aligned to the end of the cross axis.</li><li><strongid="b164481932161412"><aname="b164481932161412"></a><aname="b164481932161412"></a>center</strong>: Items are aligned in the middle of the cross axis.</li><li><strongid="b1294619482035"><aname="b1294619482035"></a><aname="b1294619482035"></a>baseline</strong>: Items are aligned on the peracross axis.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="ae28abf4e47a740efbd45a8f280577912"><aname="ae28abf4e47a740efbd45a8f280577912"></a><aname="ae28abf4e47a740efbd45a8f280577912"></a>Positioning type of an element. Dynamic changes are not supported.</p>
<aname="ul17185232185014"></a><aname="ul17185232185014"></a><ulid="ul17185232185014"><li><strongid="b1894911155394"><aname="b1894911155394"></a><aname="b1894911155394"></a>fixed</strong>: The element is positioned related to the browser window.</li><li><strongid="b823115152390"><aname="b823115152390"></a><aname="b823115152390"></a>absolute</strong>: The element is positioned absolutely to its parent element.</li><li><strongid="b736151417395"><aname="b736151417395"></a><aname="b736151417395"></a>relative</strong>: The element is positioned relative to its normal position.</li></ul>
<divclass="note"id="note167617191219"><aname="note167617191219"></a><aname="note167617191219"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1839092815101"><aname="p1839092815101"></a><aname="p1839092815101"></a>The <strongid="b13941713133910"><aname="b13941713133910"></a><aname="b13941713133910"></a>absolute</strong> attribute takes effect only when the parent component is <strongid="b1099913173916"><aname="b1099913173916"></a><aname="b1099913173916"></a><div></strong> or <strongid="b181001413123919"><aname="b181001413123919"></a><aname="b181001413123919"></a><stack></strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="a9a662a62cd9b40eaa0cb9ca082b6d1c2"><aname="a9a662a62cd9b40eaa0cb9ca082b6d1c2"></a><aname="a9a662a62cd9b40eaa0cb9ca082b6d1c2"></a><strongid="b481348173914"><aname="b481348173914"></a><aname="b481348173914"></a>left|top</strong><spanid="ph4818118173914"><aname="ph4818118173914"></a><aname="ph4818118173914"></a><strongid="b68143833912"><aname="b68143833912"></a><aname="b68143833912"></a>|right|bottom</strong></span> must be used together with <strongid="b881916818394"><aname="b881916818394"></a><aname="b881916818394"></a>position</strong> to determine the offset position of an element.</p>
<aname="ul12671003525"></a><aname="ul12671003525"></a><ulid="ul12671003525"><li>The <strongid="b885117712398"><aname="b885117712398"></a><aname="b885117712398"></a>left</strong> attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.</li><li>The <strongid="b65591759395"><aname="b65591759395"></a><aname="b65591759395"></a>top</strong> attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.</li><li>The <strongid="b179013323910"><aname="b179013323910"></a><aname="b179013323910"></a>right</strong> attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element. </li><li>The <strongid="b77091602397"><aname="b77091602397"></a><aname="b77091602397"></a>bottom</strong> attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. </li></ul>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p3748160105710"><aname="p3748160105710"></a><aname="p3748160105710"></a><strongid="b466773714588"><aname="b466773714588"></a><aname="b466773714588"></a>start | end</strong> must be used together with <strongid="b18674173720587"><aname="b18674173720587"></a><aname="b18674173720587"></a>position</strong> to determine the offset of an element.</p>
<aname="ul177495065715"></a><aname="ul177495065715"></a><ulid="ul177495065715"><li>The <strongid="b118319333592"><aname="b118319333592"></a><aname="b118319333592"></a>start</strong> attribute specifies the start edge position of the element. This attribute defines the offset between the start edge of a positioned element and that of a block included in the element.</li><li>The <strongid="b20190832110"><aname="b20190832110"></a><aname="b20190832110"></a>end</strong> attribute specifies the end edge position of the element. This attribute defines the offset between the end edge of a positioned element and that of a block included in the element.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p235472205018"><aname="p235472205018"></a><aname="p235472205018"></a>Rendering sequence of child nodes under the same parent node. The larger the value is, the later the rendering data is.</p>
<divclass="note"id="note2062416595525"><aname="note2062416595525"></a><aname="note2062416595525"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1862510596524"><aname="p1862510596524"></a><aname="p1862510596524"></a>z-index does not support auto, and other styles such as opacity do not affect the rendering sequence of z-index.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p819913575558"><aname="p819913575558"></a><aname="p819913575558"></a>Indicates the fill color for SVG images. The following components (and attributes) are supported: <strongid="b1762209242"><aname="b1762209242"></a><aname="b1762209242"></a>button</strong> (icon attribute), <strongid="b54348111246"><aname="b54348111246"></a><aname="b54348111246"></a>piece</strong> (icon attribute), <strongid="b1012610147412"><aname="b1012610147412"></a><aname="b1012610147412"></a>search</strong> (icon attribute), <strongid="b1820351718410"><aname="b1820351718410"></a><aname="b1820351718410"></a>input</strong> (headericon attribute), <strongid="b7501920640"><aname="b7501920640"></a><aname="b7501920640"></a>textarea</strong> (headericon attribute), and <strongid="b713010283412"><aname="b713010283412"></a><aname="b713010283412"></a>image</strong> (src attribute), and <strongid="b136173555"><aname="b136173555"></a><aname="b136173555"></a>toolbar-item</strong> (icon attribute).</p>
<pid="p10159166173611"><aname="p10159166173611"></a><aname="p10159166173611"></a>The <strongid="b75579543717"><aname="b75579543717"></a><aname="b75579543717"></a>fill</strong> color value in the SVG image file is replaced with the value of <strongid="b1929418161085"><aname="b1929418161085"></a><aname="b1929418161085"></a>image-fill</strong> during rendering, and is valid only for the fill attribute that is declared in the SVG image.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p3233818114810"><aname="p3233818114810"></a><aname="p3233818114810"></a>Clip area of a component. Only the content within this area is displayed.</p>
<pid="p154319832714"><aname="p154319832714"></a><aname="p154319832714"></a><strongid="b4127241205410"><aname="b4127241205410"></a><aname="b4127241205410"></a><geometry-box></strong>: applicable scope of the clip area's width and height. The default value is <strongid="b1385554719580"><aname="b1385554719580"></a><aname="b1385554719580"></a>border-box</strong>. Available values include:</p>
<aname="ul17350142316276"></a><aname="ul17350142316276"></a><ulid="ul17350142316276"><li><strongid="b1768919150919"><aname="b1768919150919"></a><aname="b1768919150919"></a>margin-box</strong>: The width and height includes the margin.</li><li><strongid="b69741730917"><aname="b69741730917"></a><aname="b69741730917"></a>border-box</strong>: The width and height includes the border.</li><li><strongid="b5798204310116"><aname="b5798204310116"></a><aname="b5798204310116"></a>padding-box</strong>: The width and height includes the padding.</li><li><strongid="b35961231724"><aname="b35961231724"></a><aname="b35961231724"></a>content-box</strong>: The width and height does not include any margin, border, or padding.</li></ul>
<pid="p27639253501"><aname="p27639253501"></a><aname="p27639253501"></a><strongid="b183113521102"><aname="b183113521102"></a><aname="b183113521102"></a><basic-shape></strong>: shape of the clip area. Available values include:</p>
<aname="ul1217191102613"></a><aname="ul1217191102613"></a><ulid="ul1217191102613"><li><strongid="b77761644121114"><aname="b77761644121114"></a><aname="b77761644121114"></a>inset</strong>, in the format of inset( <percentage>{1,4} [ round <'border-radius'> ]? ).</li><li><strongid="b1777113712123"><aname="b1777113712123"></a><aname="b1777113712123"></a>circle</strong>, in the format of circle( [&lt;percentage&gt;]? [ at <percentage><percentage> ]? ).</li><li><strongid="b9872444171217"><aname="b9872444171217"></a><aname="b9872444171217"></a>ellipse</strong>, in the format of ellipse([&lt;percentage&gt;{2}]? [ at <percentage><percentage> ]? ).</li><li><strongid="b20483410139"><aname="b20483410139"></a><aname="b20483410139"></a>polygon</strong>, in the format of polygon( [ <percentage><percentage>]# )</li><li><strongid="b1395604611137"><aname="b1395604611137"></a><aname="b1395604611137"></a>path</strong>, in the format of path( <string> ).</li></ul>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p142619115239"><aname="p142619115239"></a><aname="p142619115239"></a>Image used for the mask of a component:</p>
<pid="p19331162103919"><aname="p19331162103919"></a><aname="p19331162103919"></a>Gradient color mask, for example:</p>
<pid="p1933119218398"><aname="p1933119218398"></a><aname="p1933119218398"></a>Mask filled by a local SVG image, for example, <strongid="b18353259122517"><aname="b18353259122517"></a><aname="b18353259122517"></a>url(common/mask.svg)</strong></p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p265717128307"><aname="p265717128307"></a><aname="p265717128307"></a>Display size of the mask image. The setting is valid only when <strongid="b1032933892617"><aname="b1032933892617"></a><aname="b1032933892617"></a>mask-image</strong> is set to an image source.</p>
<pid="p7530122117243"><aname="p7530122117243"></a><aname="p7530122117243"></a>The <strongid="b1104597861"><aname="b1104597861"></a><aname="b1104597861"></a>string</strong> values are as follows:</p>
<aname="ul484762411309"></a><aname="ul484762411309"></a><ulid="ul484762411309"><li><strongid="b1176457667"><aname="b1176457667"></a><aname="b1176457667"></a>contain</strong>: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.</li><li><strongid="b7163163515273"><aname="b7163163515273"></a><aname="b7163163515273"></a>cover</strong>: Extends the image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.</li><li><strongid="b1974245036"><aname="b1974245036"></a><aname="b1974245036"></a>auto</strong>: The original image width-height ratio is retained.</li></ul>
<pid="p753017210249"><aname="p753017210249"></a><aname="p753017210249"></a><strongid="b19788050192816"><aname="b19788050192816"></a><aname="b19788050192816"></a>length</strong> indicates the width and height of the image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strongid="b1744084695"><aname="b1744084695"></a><aname="b1744084695"></a>auto</strong> by default.</p>
<pid="p13530162192416"><aname="p13530162192416"></a><aname="p13530162192416"></a>When you set the width and height with percentage values, the image size is set in relative to the original size. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strongid="b260843713"><aname="b260843713"></a><aname="b260843713"></a>auto</strong> by default.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p563114246318"><aname="p563114246318"></a><aname="p563114246318"></a>Display position of the mask image. The setting is valid only when <strongid="b13358144513357"><aname="b13358144513357"></a><aname="b13358144513357"></a>mask-image</strong> is set to an image source. Using keywords: If only one keyword is specified, the other value is <strongid="b105241458193513"><aname="b105241458193513"></a><aname="b105241458193513"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.</p>
<pid="p158151314323"><aname="p158151314323"></a><aname="p158151314323"></a>The <strongid="b726573840"><aname="b726573840"></a><aname="b726573840"></a>string</strong> values are as follows:</p>
<aname="ul1565191933217"></a><aname="ul1565191933217"></a><ulid="ul1565191933217"><li><strongid="b359890451"><aname="b359890451"></a><aname="b359890451"></a>left</strong>: leftmost in the horizontal direction</li><li><strongid="b171018374"><aname="b171018374"></a><aname="b171018374"></a>right</strong>: rightmost in the horizontal direction</li><li><strongid="b2021110720"><aname="b2021110720"></a><aname="b2021110720"></a>top</strong>: top in the vertical direction</li><li><strongid="b1626985140"><aname="b1626985140"></a><aname="b1626985140"></a>bottom</strong>: bottom in the vertical direction</li><li><strongid="b82069316"><aname="b82069316"></a><aname="b82069316"></a>center</strong>: center position</li></ul>
<pid="p8631192415319"><aname="p8631192415319"></a><aname="p8631192415319"></a>Using <strongid="b1094679653"><aname="b1094679653"></a><aname="b1094679653"></a><length></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strongid="b1783832372"><aname="b1783832372"></a><aname="b1783832372"></a>0 0</strong> indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is <strongid="b2089747492"><aname="b2089747492"></a><aname="b2089747492"></a>50%</strong>.</p>
<pid="p4632424173116"><aname="p4632424173116"></a><aname="p4632424173116"></a>Using <strongid="b1181683810"><aname="b1181683810"></a><aname="b1181683810"></a><percentage></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strongid="b934522266"><aname="b934522266"></a><aname="b934522266"></a>0% 0%</strong> indicates the upper left corner. <strongid="b1996254905"><aname="b1996254905"></a><aname="b1996254905"></a>100% 100%</strong> indicates the lower right corner. If only one value is specified, the other one is <strongid="b454638719"><aname="b454638719"></a><aname="b454638719"></a>50%</strong>.</p>
<pid="p6632122443117"><aname="p6632122443117"></a><aname="p6632122443117"></a>Using both <strongid="b1957886868"><aname="b1957886868"></a><aname="b1957886868"></a><percentage></strong> and <strongid="b1109884205"><aname="b1109884205"></a><aname="b1109884205"></a><length></strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p1828135012459"><aname="p1828135012459"></a><aname="p1828135012459"></a>Border image of the specified element.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p1077219518478"><aname="p1077219518478"></a><aname="p1077219518478"></a>Padding of the image.</p>
<pid="p10458230144817"><aname="p10458230144817"></a><aname="p10458230144817"></a>The attribute can have one to four values:</p>
<pid="p17458143094817"><aname="p17458143094817"></a><aname="p17458143094817"></a>If you set only one value, it specifies the padding for four sides.</p>
<pid="p74581930134818"><aname="p74581930134818"></a><aname="p74581930134818"></a>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.</p>
<pid="p144581530114818"><aname="p144581530114818"></a><aname="p144581530114818"></a>If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.</p>
<pid="p54581730104812"><aname="p54581730104812"></a><aname="p54581730104812"></a>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p19936125310481"><aname="p19936125310481"></a><aname="p19936125310481"></a>Width of the border image.</p>
<pid="p1975945114498"><aname="p1975945114498"></a><aname="p1975945114498"></a>If you set only one value, it specifies the width for four sides.</p>
<pid="p875917519493"><aname="p875917519493"></a><aname="p875917519493"></a>If you set two values, the first value specifies the top and bottom width, and the second value specifies the left and right width.</p>
<pid="p375975111493"><aname="p375975111493"></a><aname="p375975111493"></a>If you set three values, the first value specifies the top width, the second value specifies the left and right width, and the third value specifies the bottom width.</p>
<pid="p1767175114494"><aname="p1767175114494"></a><aname="p1767175114494"></a>If you set four values, they respectively specify the width for top, right, bottom, and left sides (in clockwise order).</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p766695175016"><aname="p766695175016"></a><aname="p766695175016"></a>How far the border image can extend beyond the border box.</p>
<pid="p620321917512"><aname="p620321917512"></a><aname="p620321917512"></a>If you set only one value, it specifies the distance of the boarder image beyond the border on four sides.</p>
<pid="p16203119165118"><aname="p16203119165118"></a><aname="p16203119165118"></a>If you set two values, the first value specifies the distance of the boarder image's top and bottom sides beyond the boarder, and the second value specifies the distance of the boarder image's left and right sides beyond the boarder.</p>
<pid="p15203201935120"><aname="p15203201935120"></a><aname="p15203201935120"></a>If you set three values, the first value specifies the distance of the boarder image's top side beyond the boarder, the second value specifies the distance of the boarder image's left and right sides beyond the boarder, and the third value specifies the distance of the boarder image's bottom side beyond the boarder.</p>
<pid="p19203191995117"><aname="p19203191995117"></a><aname="p19203191995117"></a>If you set four values, they respectively specify the distance of the boarder image's top, right, bottom, and left sides beyond the boarder (in clockwise order).</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p25034393547"><aname="p25034393547"></a><aname="p25034393547"></a>How the border image fills the border box.</p>
<pid="p1565619515552"><aname="p1565619515552"></a><aname="p1565619515552"></a><strongid="b17135141519202"><aname="b17135141519202"></a><aname="b17135141519202"></a>stretch</strong>: stretches the image to fill the border box.</p>
<pid="p1065685145518"><aname="p1065685145518"></a><aname="p1065685145518"></a><strongid="b8590723152011"><aname="b8590723152011"></a><aname="b8590723152011"></a>repeat</strong>: tiles the image to fill the border box.</p>
<pid="p15656195116551"><aname="p15656195116551"></a><aname="p15656195116551"></a><strongid="b125122912014"><aname="b125122912014"></a><aname="b125122912014"></a>round</strong>: tiles the image to fill the border box. When the image cannot be tiled for an integer number of times, it can be scaled based on the site requirements.</p>
<tdclass="cellrowborder"valign="top"width="40.954095409540955%"headers="mcps1.1.5.1.4 "><pid="p636314586558"><aname="p636314586558"></a><aname="p636314586558"></a>Shorthand attribute. The options are as follows:</p>
<aname="ul192711844297"></a><aname="ul192711844297"></a><ulid="ul192711844297"><li>Attributes of the image border. The parameters include <strongid="b87661029122310"><aname="b87661029122310"></a><aname="b87661029122310"></a>border-image-source</strong>, <strongid="b5609433182310"><aname="b5609433182310"></a><aname="b5609433182310"></a>border-image-slice</strong>, <strongid="b21858391236"><aname="b21858391236"></a><aname="b21858391236"></a>border-image-width</strong>, <strongid="b124371434238"><aname="b124371434238"></a><aname="b124371434238"></a>border-image-outset</strong>, and <strongid="b1463045010235"><aname="b1463045010235"></a><aname="b1463045010235"></a>border-image-repeat</strong>, respectively meaning the padding, width of the border image, how far the border image can extend beyond the border box, and how the border image fills the border box. The default values are used if the parameters are not set.<pid="p2288416171016"><aname="p2288416171016"></a><aname="p2288416171016"></a>Syntax reference: <ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source"target="_blank"rel="noopener noreferrer"><'border-image-source'></a><ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#double_bar"target="_blank"rel="noopener noreferrer">||</a><ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice"target="_blank"rel="noopener noreferrer"><'border-image-slice'></a><ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#brackets"target="_blank"rel="noopener noreferrer">[</a> / <ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width"target="_blank"rel="noopener noreferrer"><'border-image-width'></a><ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#single_bar"target="_blank"rel="noopener noreferrer">|</a> / <ahref="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-width"target="_blank"rel="noopener noreferrer"><'border-image-width'></a><ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#question_mark_"target="_blank"rel="noopener noreferrer">?</a> / <ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset"target="_blank"rel="noopener noreferrer"><'border-image-outset'></a><ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#brackets"target="_blank"rel="noopener noreferrer">]</a><ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#question_mark"target="_blank"rel="noopener noreferrer">?</a><ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#double_bar"target="_blank"rel="noopener noreferrer">||</a><ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat"target="_blank"rel="noopener noreferrer"><'border-image-repeat'></a></p>
</li></ul>
<aname="ul13090488916"></a><aname="ul13090488916"></a><ulid="ul13090488916"><li>Gradient color border.<pid="p4219102819109"><aname="p4219102819109"></a><aname="p4219102819109"></a>Example</p>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p9684162011326"><aname="p9684162011326"></a><aname="p9684162011326"></a>Main axis direction of the flex container. Available values are as follows:</p>
<aname="ul166842020123216"></a><aname="ul166842020123216"></a><ulid="ul166842020123216"><li><strongid="b6448132113155"><aname="b6448132113155"></a><aname="b6448132113155"></a>column</strong>: Items are placed vertically from top to bottom.</li><li><strongid="b1655362851511"><aname="b1655362851511"></a><aname="b1655362851511"></a>row</strong>: Items are placed horizontally from left to right.</li></ul>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p9685102083216"><aname="p9685102083216"></a><aname="p9685102083216"></a>Whether flex items in the container are displayed in a single line or multiple lines. Currently, dynamic modification is not supported. Available values are as follows:</p>
<aname="ul2685520133215"></a><aname="ul2685520133215"></a><ulid="ul2685520133215"><li><strongid="b17130154919435"><aname="b17130154919435"></a><aname="b17130154919435"></a>nowrap</strong>: Items are displayed on a single axis.</li><li><strongid="b9317903440"><aname="b9317903440"></a><aname="b9317903440"></a>wrap</strong>: Items are displayed on multiple axes.</li></ul>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p2685520183214"><aname="p2685520183214"></a><aname="p2685520183214"></a>How items are aligned along the main axis of the current line in a flex container. Available values are as follows:</p>
<aname="ul10685142083220"></a><aname="ul10685142083220"></a><ulid="ul10685142083220"><li><strongid="b1501318300"><aname="b1501318300"></a><aname="b1501318300"></a>flex-start</strong>: Items are packed towards the start row.</li><li><strongid="b44838392915"><aname="b44838392915"></a><aname="b44838392915"></a>flex-end</strong>: Items are packed towards the end row.</li><li><strongid="b1427203684411"><aname="b1427203684411"></a><aname="b1427203684411"></a>center</strong>: Items are centered along the row.</li><li><strongid="b22154711448"><aname="b22154711448"></a><aname="b22154711448"></a>space-between</strong>: Items are positioned with space between the rows.</li><li><strongid="b233020014456"><aname="b233020014456"></a><aname="b233020014456"></a>space-around</strong>: Items are positioned with space before, between, and after the rows.</li><li><strongid="b93731646175116"><aname="b93731646175116"></a><aname="b93731646175116"></a>space-evenly</strong><supid="sup7995448141310"><aname="sup7995448141310"></a><aname="sup7995448141310"></a>5+</sup>: Items are arranged with even space between each two.</li></ul>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p968612093212"><aname="p968612093212"></a><aname="p968612093212"></a>How items are aligned along the cross axis of the current line in a flex container. Available values are as follows:</p>
<aname="ul1668642083219"></a><aname="ul1668642083219"></a><ulid="ul1668642083219"><li><strongid="b11551451152410"><aname="b11551451152410"></a><aname="b11551451152410"></a>stretch</strong>: Items are stretched to the same height or width as the container in the cross axis direction. </li><li><strongid="b121104330341"><aname="b121104330341"></a><aname="b121104330341"></a>flex-start</strong>: Items are aligned to the start of the cross axis.</li><li><strongid="b475319397428"><aname="b475319397428"></a><aname="b475319397428"></a>flex-end</strong>: Items are aligned to the end of the cross axis.</li><li><strongid="b29371949171513"><aname="b29371949171513"></a><aname="b29371949171513"></a>center</strong>: Items are aligned in the middle of the cross axis.</li></ul>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p10687112023210"><aname="p10687112023210"></a><aname="p10687112023210"></a>Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:</p>
<aname="ul156878209329"></a><aname="ul156878209329"></a><ulid="ul156878209329"><li><strongid="b136621415154616"><aname="b136621415154616"></a><aname="b136621415154616"></a>flex-start</strong>: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.</li><li><strongid="b597516158475"><aname="b597516158475"></a><aname="b597516158475"></a>flex-end</strong>: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.</li><li><strongid="b13497201184810"><aname="b13497201184810"></a><aname="b13497201184810"></a>center</strong>: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.</li><li><strongid="b1679416397492"><aname="b1679416397492"></a><aname="b1679416397492"></a>space-between</strong>: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.</li><li><strongid="b190019665015"><aname="b190019665015"></a><aname="b190019665015"></a>space-around</strong>: All rows are evenly distributed in the container, and the spacing between two adjacent lines is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.</li></ul>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p7687920123212"><aname="p7687920123212"></a><aname="p7687920123212"></a>Type of the view box of the element. Currently, dynamic modification is not supported. Available values are as follows:</p>
<aname="ul168702017322"></a><aname="ul168702017322"></a><ulid="ul168702017322"><li><strongid="b1723224655016"><aname="b1723224655016"></a><aname="b1723224655016"></a>flex</strong>: flexible layout</li><li><strongid="b15510348175010"><aname="b15510348175010"></a><aname="b15510348175010"></a>grid</strong>: grid layout</li><li><strongid="b102151023161"><aname="b102151023161"></a><aname="b102151023161"></a>none</strong>: not rendered</li></ul>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p186883207326"><aname="p186883207326"></a><aname="p186883207326"></a>Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when <strongid="b4125132113216"><aname="b4125132113216"></a><aname="b4125132113216"></a>display</strong> is set to <strongid="b12191152318329"><aname="b12191152318329"></a><aname="b12191152318329"></a>grid</strong>.</p>
<pid="p7688172013211"><aname="p7688172013211"></a><aname="p7688172013211"></a>For example, set <strongid="b1023814188516"><aname="b1023814188516"></a><aname="b1023814188516"></a>grid-template-columns</strong> to:</p>
<aname="ul3688920133220"></a><aname="ul3688920133220"></a><ulid="ul3688920133220"><li><strongid="b112413913347"><aname="b112413913347"></a><aname="b112413913347"></a>50px 100px 60px</strong>: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px.</li><li><strongid="b6967342153412"><aname="b6967342153412"></a><aname="b6967342153412"></a>1fr 1fr 2fr</strong>: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares.</li><li><strongid="b869516133514"><aname="b869516133514"></a><aname="b869516133514"></a>30% 20% 50%</strong>: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%.</li><li><strongid="b2099416428352"><aname="b2099416428352"></a><aname="b2099416428352"></a>repeat (2,100px)</strong>: There are two columns. The first column is 100 px, and the second column is 100 px.</li><li><strongid="b1528612819366"><aname="b1528612819366"></a><aname="b1528612819366"></a>repeat(auto-fill,100px)</strong><supid="sup126181292519"><aname="sup126181292519"></a><aname="sup126181292519"></a>5+</sup>: Each column is 100 px and repeats to fill the cross axis. The number of columns is calculated based on the column size and the cross axis size.</li><li><strongid="b02617531161"><aname="b02617531161"></a><aname="b02617531161"></a>auto 1fr 1fr</strong>: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the rest two columns.</li></ul>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p96881920183213"><aname="p96881920183213"></a><aname="p96881920183213"></a>Size of the gap between two consecutive rows or columns in a grid layout. You can also use <strongid="b39881232191618"><aname="b39881232191618"></a><aname="b39881232191618"></a>grid-gap</strong> to set the same size of the gap between rows and columns. This attribute is valid only when <strongid="b49951732201611"><aname="b49951732201611"></a><aname="b49951732201611"></a>display</strong> is set to <strongid="b189964324166"><aname="b189964324166"></a><aname="b189964324166"></a>grid</strong>.</p>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p16689132033212"><aname="p16689132033212"></a><aname="p16689132033212"></a>Start and end row numbers of the current item in the grid layout. This attribute is valid only when <strongid="b1966015213323"><aname="b1966015213323"></a><aname="b1966015213323"></a>display</strong> of the parent component is <strongid="b116675210328"><aname="b116675210328"></a><aname="b116675210328"></a>grid</strong>. (The <strongid="b266720217326"><aname="b266720217326"></a><aname="b266720217326"></a>display</strong> attribute of the parent component can be set to <strongid="b1866713218329"><aname="b1866713218329"></a><aname="b1866713218329"></a>grid</strong> only for the <strongid="b136678243216"><aname="b136678243216"></a><aname="b136678243216"></a><div></strong> container.)</p>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p1168942083212"><aname="p1168942083212"></a><aname="p1168942083212"></a>Start and end column numbers of the current item in the grid layout. This attribute is valid only when <strongid="b826524911361"><aname="b826524911361"></a><aname="b826524911361"></a>display</strong> of the parent component is <strongid="b1527010493361"><aname="b1527010493361"></a><aname="b1527010493361"></a>grid</strong>. (The <strongid="b22701449123614"><aname="b22701449123614"></a><aname="b22701449123614"></a>display</strong> attribute of the parent component can be set to <strongid="b1327011499366"><aname="b1327011499366"></a><aname="b1327011499366"></a>grid</strong> only for the <strongid="b122717491366"><aname="b122717491366"></a><aname="b122717491366"></a><div></strong> container.)</p>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p176891320123210"><aname="p176891320123210"></a><aname="p176891320123210"></a>Using an algorithm to lay out the grid automatically. Available values are as follows:</p>
<aname="ul12689152083220"></a><aname="ul12689152083220"></a><ulid="ul12689152083220"><li><strongid="b193611954113620"><aname="b193611954113620"></a><aname="b193611954113620"></a>row</strong>: Elements are filled row by row. When there is no horizontal space in a row, a new row is added.</li><li><strongid="b5155845153318"><aname="b5155845153318"></a><aname="b5155845153318"></a>column</strong>: Elements are filled column by column. When there is no vertical space in a column, a new column is added.</li></ul>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p146532175915"><aname="p146532175915"></a><aname="p146532175915"></a>Display mode when the content exceeds the container size. Available values are as follows:</p>
<aname="ul531213221202"></a><aname="ul531213221202"></a><ulid="ul531213221202"><li><strongid="b420312341347"><aname="b420312341347"></a><aname="b420312341347"></a>visible</strong>: Displays the extra content outside the container.</li><li><strongid="b648994483617"><aname="b648994483617"></a><aname="b648994483617"></a>hidden</strong>: Truncates the extra content.</li><li><strongid="b320136134115"><aname="b320136134115"></a><aname="b320136134115"></a>scroll</strong>: Scrolls the content vertically, with a scrollbar provided.</li></ul>
<divclass="note"id="note1571135818019"><aname="note1571135818019"></a><aname="note1571135818019"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><aname="ul8327981218"></a><aname="ul8327981218"></a><ulid="ul8327981218"><li><strongid="b559885611111"><aname="b559885611111"></a><aname="b559885611111"></a>overflow</strong> works for elements whose size is fixed.</li></ul>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p17372155018015"><aname="p17372155018015"></a><aname="p17372155018015"></a>How items are aligned along the cross axis in a flex container. Available values are as follows:</p>
<aname="ul7910135512514"></a><aname="ul7910135512514"></a><ulid="ul7910135512514"><li><strongid="b11631827184414"><aname="b11631827184414"></a><aname="b11631827184414"></a>stretch</strong>: Items are stretched to the same height or width as the container in the cross axis direction.</li><li><strongid="b4742287552"><aname="b4742287552"></a><aname="b4742287552"></a>flex-start</strong>: Items are aligned to the start of the cross axis.</li><li><strongid="b17873175319556"><aname="b17873175319556"></a><aname="b17873175319556"></a>flex-end</strong>: Items are aligned to the end of the cross axis.</li><li><strongid="b10117111010566"><aname="b10117111010566"></a><aname="b10117111010566"></a>center</strong>: Items are aligned in the middle of the cross axis.</li><li><strongid="b122386256568"><aname="b122386256568"></a><aname="b122386256568"></a>baseline</strong>: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of <strongid="b15990123312581"><aname="b15990123312581"></a><aname="b15990123312581"></a>flex-start</strong>. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise.</li></ul>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p14300165317215"><aname="p14300165317215"></a><aname="p14300165317215"></a>Color of the scrollbar.</p>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p533510595217"><aname="p533510595217"></a><aname="p533510595217"></a>Width of the scrollbar.</p>
<tdclass="cellrowborder"valign="top"width="41.21587841215879%"headers="mcps1.1.6.1.5 "><pid="p153581140221"><aname="p153581140221"></a><aname="p153581140221"></a>Scrolling edge effect. Available values are as follows:</p>
<aname="ul2660123592519"></a><aname="ul2660123592519"></a><ulid="ul2660123592519"><li><strongid="b1881111011411"><aname="b1881111011411"></a><aname="b1881111011411"></a>spring</strong>: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.</li><li><strongid="b11178953147"><aname="b11178953147"></a><aname="b11178953147"></a>fade</strong>: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.</li><li><strongid="b42622051181418"><aname="b42622051181418"></a><aname="b42622051181418"></a>none</strong>: No effect after the scroll bar is moved to the edge.</li></ul>
</td>
</tr>
</tbody>
</table>
## Events<a name="section77341431152917"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="61.92999999999999%"headers="mcps1.1.4.1.3 "><pid="p617863613413"><aname="p617863613413"></a><aname="p617863613413"></a>Triggered when the page scrolls to the beginning. This event is triggered only when <strongid="b1088811149010"><aname="b1088811149010"></a><aname="b1088811149010"></a>flex-direction</strong> is <strongid="b79661241501"><aname="b79661241501"></a><aname="b79661241501"></a>row</strong>.</p>
<tdclass="cellrowborder"valign="top"width="61.92999999999999%"headers="mcps1.1.4.1.3 "><pid="p1480216408412"><aname="p1480216408412"></a><aname="p1480216408412"></a>Triggered when the page scrolls to the end. This event is triggered only when <strongid="b1284214010015"><aname="b1284214010015"></a><aname="b1284214010015"></a>flex-direction</strong> is <strongid="b14843124010014"><aname="b14843124010014"></a><aname="b14843124010014"></a>row</strong>.</p>
<tdclass="cellrowborder"valign="top"width="61.92999999999999%"headers="mcps1.1.4.1.3 "><pid="p1841194517415"><aname="p1841194517415"></a><aname="p1841194517415"></a>Triggered when the page scrolls to the top. This event is triggered only when <strongid="b2338124611015"><aname="b2338124611015"></a><aname="b2338124611015"></a>flex-direction</strong> is <strongid="b16345194616011"><aname="b16345194616011"></a><aname="b16345194616011"></a>column</strong>.</p>
<tdclass="cellrowborder"valign="top"width="61.92999999999999%"headers="mcps1.1.4.1.3 "><pid="p1885010522361"><aname="p1885010522361"></a><aname="p1885010522361"></a>Triggered when the page scrolls to the bottom. This event is triggered only when <strongid="b1437611571905"><aname="b1437611571905"></a><aname="b1437611571905"></a>flex-direction</strong> is <strongid="b4377195716016"><aname="b4377195716016"></a><aname="b4377195716016"></a>column</strong>.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section2279124532420"></a>
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="57.43000000000001%"headers="mcps1.1.5.1.4 "><pid="p0314958162512"><aname="p0314958162512"></a><aname="p0314958162512"></a>Obtains the scrolling offset of the element content.</p>
<divclass="note"id="note18321919610"><aname="note18321919610"></a><aname="note18321919610"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><aname="ul873964691316"></a><aname="ul873964691316"></a><ulid="ul873964691316"><li>To use this method, <strongid="b711552521"><aname="b711552521"></a><aname="b711552521"></a>overflow</strong> must be set to <strongid="b13595202212"><aname="b13595202212"></a><aname="b13595202212"></a>scroll</strong>. By default, the scrolling direction is the same as the container layout direction.</li></ul>
<tdclass="cellrowborder"valign="top"width="57.43000000000001%"headers="mcps1.1.5.1.4 "><pid="p10314105842512"><aname="p10314105842512"></a><aname="p10314105842512"></a>Indicates the scrolling offset of the element content.</p>
<divclass="note"id="note3227027181713"><aname="note3227027181713"></a><aname="note3227027181713"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><aname="ul11227027181717"></a><aname="ul11227027181717"></a><ulid="ul11227027181717"><li>To use this method, <strongid="b516712319210"><aname="b516712319210"></a><aname="b516712319210"></a>overflow</strong> must be set to <strongid="b101751823523"><aname="b101751823523"></a><aname="b101751823523"></a>scroll</strong>.</li></ul>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p1840123811176"><aname="p1840123811176"></a><aname="p1840123811176"></a>Offset in the x-axis direction, in px.</p>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p94021838121713"><aname="p94021838121713"></a><aname="p94021838121713"></a>Offset in the y-axis direction, in px.</p>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p8140458111815"><aname="p8140458111815"></a><aname="p8140458111815"></a>Offset for scrolling the list in the horizontal direction, in px.</p>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p214075831810"><aname="p214075831810"></a><aname="p214075831810"></a>Offset for scrolling the list in the vertical direction, in px.</p>
| flex-direction | string | row | No | Main axis direction of the flex container, which defines how items are placed in the container. Available values are as follows:<br>- **column**: Items are placed vertically from top to bottom.<br>- **row**: Items are placed horizontally from left to right.|
| flex-wrap | string | nowrap | No | Whether items in the flex container are displayed in a single line or multiple lines. The value cannot be dynamically updated. Available values are as follows:<br>- **nowrap**: Items are displayed on a single axis.<br>- **wrap**: Items are displayed on multiple axes.|
| justify-content | string | flex-start | No | How items are aligned along the main axis of the flex container. Available values are as follows:<br>- **flex-start**: Items are packed towards the start row.<br>- **flex-end**: Items are packed towards the end row.<br>- **center**: Items are centered along the row.<br>- **space-between**: Items are positioned with space between the rows.<br>- **space-around**: Items are positioned with space before, between, and after the rows.<br>- **space-evenly**<sup>5+</sup>: Items are arranged with even space between each two.|
| align-items | string | stretch<br>| No | How items are aligned along the cross axis of the flex container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.|
| align-content | string | flex-start | No | Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:<br>- **flex-start**: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.<br>- **flex-end**: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.<br>- **center**: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start edge of the container's cross axis and the first row is equal to the spacing between the end edge of the container's cross axis and the last row.<br>- **space-between**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.<br>- **space-around**: All rows are evenly distributed in the container, and the spacing between two adjacent lines is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.|
| display | string | flex | No | Type of the view box of the item. The value cannot be dynamically updated. Available values are as follows:<br>- **flex**: flexible layout.<br>- **grid**: grid layout.<br>- **none**: The box is disabled.<br>- **inline-flex**<sup>9+</sup>: layout with the **flex** and **inline-block** effects.|
| grid-template-[columns\|rows] | string | 1 row, 1 column | No | Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when **display** is set to **grid**.<br>Below are some example values of **grid-template-columns**:<br>- **50px 100px 60px**: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px.<br>- **1fr 1fr 2fr**: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares.<br>- **30% 20% 50%**: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%.<br>- **repeat (2,100px)**: There are two columns. The first column is 100 px, and the second column is 100 px.<br>- **repeat(auto-fill,100px)**<sup>5+</sup>: Each column is 100 px and repeats to fill the cross axis. The number of columns is calculated based on the column size and the cross axis size.<br>- **auto 1fr 1fr**: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the rest two columns.|
| grid-[columns\|rows]-gap | \<length> | 0 | No | Size of the gap between two consecutive rows or columns in a grid layout. You can also use **grid-gap** to set the same size of the gap between rows and columns. This attribute is valid only when **display** is set to **grid**.|
| grid-row-[start\|end] | number | - | No | Start and end row numbers of the current item in the grid layout. This attribute is valid only when the item's parent component is a **\<div>** container whose **display** style is set to **grid**.|
| grid-column-[start\|end] | number | - | No | Start and end column numbers of the current item in the grid layout. This attribute is valid only when the item's parent component is a **\<div>** container whose **display** style is set to **grid**.|
| grid-auto-flow<sup>5+</sup> | string | - | No | How grid items are laid out automatically. Available values are as follows:<br>- **row**: Elements are filled row by row. When there is no horizontal space in a row, a new row is added.<br>- **column**: Elements are filled column by column. When there is no vertical space in a column, a new column is added.|
| overflow<sup>6+</sup> | string | visible | No | Display mode when the content exceeds the container size. Available values are as follows:<br>- **visible**: Displays the extra content outside the container.<br>- **hidden**: Truncates the excess content.<br>- **scroll**: Scrolls the content vertically, with a scrollbar provided.<br>**scroll** works for elements whose size is fixed. By default, the scrolling direction is the same as the container direction.|
| align-items<sup>6+</sup> | string | - | No | How items are aligned along the cross axis in a flex container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.<br>- **baseline**: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of **flex-start**. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise.|
| scrollbar-color<sup>6+</sup> | \<color> | - | No | Color of the scrollbar. |
| scrollbar-width<sup>6+</sup> | \<length> | - | No | Width of the scrollbar. |
| overscroll-effect<sup>6+</sup> | string | - | No | How the scrollbar behaves when it reaches the edge of the scrolling area. Available values are as follows:<br>- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.<br>- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.<br>- **none**: No effect after the scroll bar is moved to the edge.|
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| getScrollOffset<sup>6+</sup> | - | ScrollOffset | Obtains the scrolling offset of the element content.<br>To use this method, **overflow** must be set to **scroll**.|
| scrollBy<sup>6+</sup> | ScrollParam | - | Sets the scrolling offset of the element content.<br>To use this method, **overflow** must be set to **scroll**.|
**Table 1** ScrollOffset<sup>6+</sup>
| Name | Type | Description |
| ---- | ------ | --------------- |
| x | number | Offset in the x-axis direction, in px.|
| y | number | Offset in the y-axis direction, in px.|
**Table 2** ScrollParam<sup>6+</sup>
| Name | Type | Description |
| ------ | ------- | ---------------- |
| dx | number | Offset for scrolling in the horizontal direction, in px.|
| dy | number | Offset for scrolling in the vertical direction, in px.|
