1# div 2 3The **\<div>** component is a basic container that is used as the root node of the page structure or is used to group the content. 4 5> **NOTE** 6> 7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Supported 13 14 15## Attributes 16 17| Name| Type| Default Value| Mandatory| Description| 18| -------- | -------- | -------- | -------- | -------- | 19| id | string | - | No| Unique ID of the component.| 20| style | string | - | No| Style declaration of the component.| 21| class | string | - | No| Style class of the component, which is used to refer to a style table.| 22| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.| 23 24 25## Events 26 27| Name| Parameter| Description| 28| -------- | -------- | -------- | 29| click | - | Triggered when the component is clicked.| 30| longpress | - | Triggered when the component is long pressed.| 31| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component.| 32 33 34## Styles 35 36| Name| Type| Default Value| Mandatory| Description| 37| -------- | -------- | -------- | -------- | -------- | 38| 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.| 39| 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**: Flex items are displayed in a single line.<br>- **wrap**: Flex items are displayed in multiple lines.| 40| 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 toward the start edge of the container along the main axis.<br>- **flex-end**: Items are packed toward the end edge of the container along the main axis.<br>- **center**: Items are packed toward the center of the container along the main axis.<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.| 41| align-items | string | stretch<sup>5+</sup><br>flex-start<sup>1-4</sup> | 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 along the cross axis.<sup>5+</sup><br>- **flex-start**: Items are packed toward the start edge of the cross axis.<br>- **flex-end**: Items are packed toward the end edge of the cross axis.<br>- **center**: Items are packed toward the center of the cross axis.| 42| 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>- **none**: not rendered| 43| width | <length> \| <percentage><sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.| 44| height | <length> \| <percentage><sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. | 45| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.<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).| 46| padding-[left\|top\|right\|bottom] | <length> | 0 | No| Left, top, right, and bottom padding.| 47| margin | <length> \| <percentage><sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. 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).| 48| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| 49| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| 50| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| 51| border-radius | <length> | - | No| Radius of round-corner borders.| 52| background-color | <color> | - | No| Background color.| 53| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.| 54| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | No| Edge of the element.<br>- **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.<br>- **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. | 55 56 57## Example 58 591. Flex style 60 61 ```html 62 <!-- xxx.hml --> 63 <div class="container"> 64 <div class="flex-box"> 65 <div class="flex-item color-primary"></div> 66 <div class="flex-item color-warning"></div> 67 <div class="flex-item color-success"></div> 68 </div> 69 </div> 70 ``` 71 72 73 ```css 74 /* xxx.css */ 75 .container { 76 flex-direction: column; 77 justify-content: center; 78 align-items: center; 79 width: 454px; 80 height: 454px; 81 } 82 .flex-box { 83 justify-content: space-around; 84 align-items: center; 85 width: 400px; 86 height: 140px; 87 background-color: #ffffff; 88 } 89 .flex-item { 90 width: 120px; 91 height: 120px; 92 border-radius: 16px; 93 } 94 .color-primary { 95 background-color: #007dff; 96 } 97 .color-warning { 98 background-color: #ff7500; 99 } 100 .color-success { 101 background-color: #41ba41; 102 } 103 ``` 104 105  106 1072. Flex wrap style 108 109 ```html 110 <!-- xxx.hml --> 111 <div class="container"> 112 <div class="flex-box"> 113 <div class="flex-item color-primary"></div> 114 <div class="flex-item color-warning"></div> 115 <div class="flex-item color-success"></div> 116 </div> 117 </div> 118 ``` 119 120 121 ```css 122 /* xxx.css */ 123 .container { 124 flex-direction: column; 125 justify-content: center; 126 align-items: center; 127 width: 454px; 128 height: 454px; 129 } 130 .flex-box { 131 justify-content: space-around; 132 align-items: center; 133 flex-wrap: wrap; 134 width: 300px; 135 height: 250px; 136 background-color: #ffffff; 137 } 138 .flex-item { 139 width: 120px; 140 height: 120px; 141 border-radius: 16px; 142 } 143 .color-primary { 144 background-color: #007dff; 145 } 146 .color-warning { 147 background-color: #ff7500; 148 } 149 .color-success { 150 background-color: #41ba41; 151 } 152 ``` 153 154  155
