1# div 2 3> **NOTE** 4> 5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7The **\<div>** component is a basic container that is used as the root node of the page structure or is used to group the content. 8 9## Required Permissions 10 11None 12 13 14## Child Components 15 16Supported 17 18 19## Attributes 20 21The [universal attributes](js-components-common-attributes.md) are supported. 22 23 24## Styles 25 26In addition to the [universal styles](js-components-common-styles.md), the following styles are supported. 27 28| Name | Type | Default Value | Mandatory| Description | 29| ------------------------------ | -------------- | ------------ | ---- | ------------------------------------------------------------ | 30| 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.| 31| 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.| 32| 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.<br>- **space-evenly**<sup>5+</sup>: Items are distributed within the container along the main axis, with even space between each two.| 33| align-items | string | stretch<br>| 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.<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.<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.| 34| 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 toward the start edge 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 toward the end edge 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 toward the center of the cross axis. 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. The spacing between two adjacent rows 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.| 35| 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.| 36| 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**.| 37| 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**.| 38| 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**.| 39| 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.| 40| 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 excess 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.| 41| 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 flex container along the cross axis.<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.| 42| scrollbar-color<sup>6+</sup> | <color> | - | No | Color of the scrollbar. | 43| scrollbar-width<sup>6+</sup> | <length> | - | No | Width of the scrollbar. | 44| 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. When the scrollbar reaches the edge, it can continue to scroll for a distance based on the initial speed or a touch event. It rebounds after being released.<br>- **fade**: Similar to the physical dynamic effect of fade. When the scrollbar reaches the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.<br>- **none**: No effect when the scrollbar reaches the edge.| 45 46 47## Events 48 49 50 51In addition to the [universal events](js-components-common-events.md), the following events are supported. 52 53| Name | Parameter | Description | 54| ------------------------ | ---- | ---------------------------------------- | 55| reachstart<sup>6+</sup> | - | Triggered when the page scrolls to the beginning. This event is triggered only when **flex-direction** is **row**.| 56| reachend<sup>6+</sup> | - | Triggered when the page scrolls to the end. This event is triggered only when **flex-direction** is **row**.| 57| reachtop<sup>6+</sup> | - | Triggered when the page scrolls to the top. This event is triggered only when **flex-direction** is **column**.| 58| reachbottom<sup>6+</sup> | - | Triggered when the page scrolls to the bottom. This event is triggered only when **flex-direction** is **column**.| 59 60## Methods 61 62In addition to the [universal methods](js-components-common-methods.md), the following methods are supported. 63 64| Name | Parameter | Return Value | Description | 65| ---------------------------- | ----------- | ------------ | --------------------------------------- | 66| getScrollOffset<sup>6+</sup> | - | ScrollOffset | Obtains the scrolling offset of the element content.<br>To use this method, **overflow** must be set to **scroll**.| 67| scrollBy<sup>6+</sup> | ScrollParam | - | Sets the scrolling offset of the element content.<br>To use this method, **overflow** must be set to **scroll**.| 68 69**Table 1** ScrollOffset<sup>6+</sup> 70 71| Name | Type | Description | 72| ---- | ------ | --------------- | 73| x | number | Offset in the x-axis direction, in px.| 74| y | number | Offset in the y-axis direction, in px.| 75 76**Table 2** ScrollParam<sup>6+</sup> 77 78| Name | Type | Description | 79| ------ | ------- | ---------------- | 80| dx | number | Offset for scrolling in the horizontal direction, in px.| 81| dy | number | Offset for scrolling in the vertical direction, in px.| 82| smooth | boolean | Whether to perform smooth processing. | 83 84 85## Example 86 871. Flex style 88 ```html 89 <!-- xxx.hml --> 90 <div class="container"> 91 <div class="flex-box"> 92 <div class="flex-item color-primary"></div> 93 <div class="flex-item color-warning"></div> 94 <div class="flex-item color-success"></div> 95 </div> 96 </div> 97 ``` 98 99 ```css 100 /* xxx.css */ 101 .container { 102 flex-direction: column; 103 justify-content: center; 104 align-items: center; 105 width: 454px; 106 height: 454px; 107 } 108 .flex-box { 109 justify-content: space-around; 110 align-items: center; 111 width: 400px; 112 height: 140px; 113 background-color: #ffffff; 114 } 115 .flex-item { 116 width: 120px; 117 height: 120px; 118 border-radius: 16px; 119 } 120 .color-primary { 121 background-color: #007dff; 122 } 123 .color-warning { 124 background-color: #ff7500; 125 } 126 .color-success { 127 background-color: #41ba41; 128 } 129 ``` 130 131  132 1332. Flex wrap style 134 ```html 135 <!-- xxx.hml --> 136 <div class="container"> 137 <div class="flex-box"> 138 <div class="flex-item color-primary"></div> 139 <div class="flex-item color-warning"></div> 140 <div class="flex-item color-success"></div> 141 </div> 142 </div> 143 ``` 144 145 ```css 146 /* xxx.css */ 147 .container { 148 flex-direction: column; 149 justify-content: center; 150 align-items: center; 151 width: 454px; 152 height: 454px; 153 } 154 .flex-box { 155 justify-content: space-around; 156 align-items: center; 157 flex-wrap: wrap; 158 width: 300px; 159 height: 250px; 160 background-color: #ffffff; 161 } 162 .flex-item { 163 width: 120px; 164 height: 120px; 165 border-radius: 16px; 166 } 167 .color-primary { 168 background-color: #007dff; 169 } 170 .color-warning { 171 background-color: #ff7500; 172 } 173 .color-success { 174 background-color: #41ba41; 175 } 176 ``` 177 178  179 1803. Grid style 181 182 ```html 183 <!-- xxx.hml --> 184 <div class="common grid-parent"> 185 <div class="grid-child grid-left-top"></div> 186 <div class="grid-child grid-left-bottom"></div> 187 <div class="grid-child grid-right-top"></div> 188 <div class="grid-child grid-right-bottom"></div> 189 </div> 190 ``` 191 192 ```css 193 /* xxx.css */ 194 .common { 195 width: 400px; 196 height: 400px; 197 background-color: #ffffff; 198 align-items: center; 199 justify-content: center; 200 margin: 24px; 201 } 202 .grid-parent { 203 display: grid; 204 grid-template-columns: 35% 35%; 205 grid-columns-gap: 24px; 206 grid-rows-gap: 24px; 207 grid-template-rows: 35% 35%; 208 } 209 .grid-child { 210 width: 100%; 211 height: 100%; 212 border-radius: 8px; 213 } 214 .grid-left-top { 215 grid-row-start: 0; 216 grid-column-start: 0; 217 grid-row-end: 0; 218 grid-column-end: 0; 219 background-color: #3f56ea; 220 } 221 .grid-left-bottom { 222 grid-row-start: 1; 223 grid-column-start: 0; 224 grid-row-end: 1; 225 grid-column-end: 0; 226 background-color: #00aaee; 227 } 228 .grid-right-top { 229 grid-row-start: 0; 230 grid-column-start: 1; 231 grid-row-end: 0; 232 grid-column-end: 1; 233 background-color: #00bfc9; 234 } 235 .grid-right-bottom { 236 grid-row-start: 1; 237 grid-column-start: 1; 238 grid-row-end: 1; 239 grid-column-end: 1; 240 background-color: #47cc47; 241 } 242 ``` 243 244  245 2464. Dragging<sup>7+</sup> 247 ```html 248 <!-- xxx.hml --> 249 <div class="container"> 250 <div class="content" ondragstart="dragstart" ondrag="drag" ondragend="dragend" style="position: absolute;left: {{left}};top: {{top}};"> 251 </div> 252 </div> 253 ``` 254 255 ```css 256 /* xxx.css */ 257 .container { 258 flex-direction: column; 259 width: 100%; 260 height: 100%; 261 } 262 .content { 263 width: 200px; 264 height: 200px; 265 background-color: red; 266 } 267 ``` 268 269 ```js 270 // xxx.js 271 import promptAction from '@ohos.promptAction'; 272 export default { 273 data:{ 274 left:0, 275 top:0, 276 }, 277 dragstart(e){ 278 prompt.showToast({ 279 message: 'Start to be dragged' 280 }) 281 }, 282 drag(e){ 283 this.left = e.globalX; 284 this.top = e.globalY; 285 }, 286 dragend(e){ 287 promptAction.showToast({ 288 message: 'End Drag' 289 }) 290 } 291 } 292 ``` 293 294  295 296 ```html 297 <!-- xxx.hml --> 298 <div class="container"> 299 <div class="content" ondrag="drag" style="position: absolute;left: {{left}};top: {{top}};"></div> 300 <div style="width: 500px; height: 500px; background-color: yellow; position: fixed; left: 15%; top: 30%; opacity:0.3" 301 ondragenter="dragenter" ondragover="dragover" ondragleave="dragleave" ondrop="drop"> 302 </div> 303 </div> 304 ``` 305 306 ```css 307 /* xxx.css */ 308 .container { 309 flex-direction: column; 310 width: 100%; 311 position: relative; 312 max-width: 100%; 313 } 314 .content{ 315 width: 200px; 316 height: 200px; 317 background-color: red; 318 position: absolute; 319 } 320 ``` 321 322 ```js 323 // xxx.js 324 import promptAction from '@ohos.promptAction'; 325 export default { 326 data:{ 327 left:0, 328 top:0, 329 }, 330 drag(e){ 331 this.left = e.globalX; 332 this.top = e.globalY; 333 }, 334 dragenter(e){ 335 promptAction.showToast({ 336 message: 'enter' 337 }) 338 }, 339 dragover(e){ 340 promptAction.showToast({ 341 message: 'over' 342 }) 343 }, 344 dragleave(e){ 345 promptAction.showToast({ 346 message: 'leave' 347 }) 348 }, 349 drop(e){ 350 promptAction.showToast({ 351 message: 'drop' 352 }) 353 } 354 } 355 ``` 356 357  358 3595. Pinching<sup>7+</sup> 360 ```html 361 <!-- xxx.hml --> 362 <div class="container"> 363 <div class="content" onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate" 364 onpinchcancel="pinchcancel"> 365 </div> 366 </div> 367 ``` 368 369 ```css 370 /* xxx.css */ 371 .container { 372 flex-direction: column; 373 justify-content: center; 374 align-items: center; 375 width: 454px; 376 height: 454px; 377 } 378 .content { 379 width: 400px; 380 height: 400px; 381 background-color: aqua; 382 margin: 30px; 383 } 384 ``` 385 386 ```js 387 // xxx.js 388 import promptAction from '@ohos.promptAction'; 389 export default { 390 pinchstart(e){ 391 promptAction.showToast({ 392 message: 'pinchstart!!!' 393 }) 394 }, 395 pinchupdate(e){ 396 promptAction.showToast({ 397 message: 'Two-finger pinch update' 398 }) 399 }, 400 pinchend(e){ 401 promptAction.showToast({ 402 message: 'Finished with two fingers pinching' 403 }) 404 }, 405 pinchcancel(e){ 406 promptAction.showToast({ 407 message: 'Finger pinching is interrupted' 408 }) 409 } 410 } 411 ``` 412 413  414
