# div The **\
** component is a basic container that is used as the root node of the page structure or is used to group the content. > **NOTE** > > This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components Supported ## Attributes | Name| Type| Default Value| Mandatory| Description| | -------- | -------- | -------- | -------- | -------- | | id | string | - | No| Unique ID of the component.| | style | string | - | No| Style declaration of the component.| | class | string | - | No| Style class of the component, which is used to refer to a style table.| | ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.| ## Events | Name| Parameter| Description| | -------- | -------- | -------- | | click | - | Triggered when the component is clicked.| | longpress | - | Triggered when the component is long pressed.| | swipe5+ | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component.| ## Styles | Name| Type| Default Value| Mandatory| Description| | -------- | -------- | -------- | -------- | -------- | | 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:
- **column**: Items are placed vertically from top to bottom.
- **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:
- **nowrap**: Flex items are displayed in a single line.
- **wrap**: Flex items are displayed in multiple lines.| | justify-content | string | flex-start | No| How items are aligned along the main axis of the flex container. Available values are as follows:
- **flex-start**: Items are packed toward the start edge of the container along the main axis.
- **flex-end**: Items are packed toward the end edge of the container along the main axis.
- **center**: Items are packed toward the center of the container along the main axis.
- **space-between**: Items are positioned with space between the rows.
- **space-around**: Items are positioned with space before, between, and after the rows.| | align-items | string | stretch5+
flex-start1-4 | No| How items are aligned along the cross axis in a flex container. Available values are as follows:
- **stretch**: Items are stretched to the same height or width as the container along the cross axis.5+
- **flex-start**: Items are packed toward the start edge of the cross axis.
- **flex-end**: Items are packed toward the end edge of the cross axis.
- **center**: Items are packed toward the center of the cross axis.| | display | string | flex | No| Type of the view box of the item. The value cannot be dynamically updated. Available values are as follows:
- **flex**: flexible layout
- **none**: not rendered| | width | <length> \| <percentage>5+ | - | No| Component width.

If this attribute is not set, the default value **0** is used.| | height | <length> \| <percentage>5+ | - | No| Component height.
If this attribute is not set, the default value **0** is used. | | padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.
- 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.
- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| | padding-[left\|top\|right\|bottom] | <length> | 0 | No| Left, top, right, and bottom padding.| | margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| | margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| | border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| | border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| | border-radius | <length> | - | No| Radius of round-corner borders.| | background-color | <color> | - | No| Background color.| | opacity5+ | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.| | [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **left**: 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.
- **top**: 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. | ## Example 1. Flex style ```html
``` ```css /* xxx.css */ .container { flex-direction: column; justify-content: center; align-items: center; width: 454px; height: 454px; } .flex-box { justify-content: space-around; align-items: center; width: 400px; height: 140px; background-color: #ffffff; } .flex-item { width: 120px; height: 120px; border-radius: 16px; } .color-primary { background-color: #007dff; } .color-warning { background-color: #ff7500; } .color-success { background-color: #41ba41; } ``` ![en-us_image_0000001381108420](figures/en-us_image_0000001381108420.png) 2. Flex wrap style ```html
``` ```css /* xxx.css */ .container { flex-direction: column; justify-content: center; align-items: center; width: 454px; height: 454px; } .flex-box { justify-content: space-around; align-items: center; flex-wrap: wrap; width: 300px; height: 250px; background-color: #ffffff; } .flex-item { width: 120px; height: 120px; border-radius: 16px; } .color-primary { background-color: #007dff; } .color-warning { background-color: #ff7500; } .color-success { background-color: #41ba41; } ``` ![en-us_image_0000001431148457](figures/en-us_image_0000001431148457.png)