1# div 2 3> **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6基础容器，用作页面结构的根节点或将内容进行分组。 7 8## 权限列表 9 10无 11 12 13## 子组件 14 15支持。 16 17 18## 属性 19 20支持[通用属性](../arkui-js/js-components-common-attributes.md)。 21 22 23## 样式 24 25除支持组件[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 26 27| 名称 | 类型 | 默认值 | 必填 | 描述 | 28| ------------------------------ | -------------- | ------------ | ---- | ------------------------------------------------------------ | 29| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：<br/>- column：垂直方向从上到下。<br/>- row：水平方向从左到右。 | 30| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：<br/>- nowrap：不换行，单行显示。<br/>- wrap：换行，多行显示。 | 31| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：<br/>- flex-start：项目位于容器的开头。<br/>- flex-end：项目位于容器的结尾。<br/>- center：项目位于容器的中心。<br/>- space-between：项目位于各行之间留有空白的容器内。<br/>- space-around：项目位于各行之前、之间、之后都留有空白的容器内。<br/>- space-evenly<sup>5+</sup>: 均匀排列每个元素，每个元素之间的间隔相等。 | 32| align-items | string | stretch<br/> | 否 | flex容器当前行的交叉轴对齐格式，可选值为：<br/>- stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>- flex-start：元素向交叉轴起点对齐。<br/>- flex-end：元素向交叉轴终点对齐。<br/>- center：元素在交叉轴居中。<br/>- baseline：如Flex布局纵向排列，则该值与’flex-start‘等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 | 33| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：<br/>- flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>- flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>- center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>- space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>- space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 | 34| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：<br/>- flex：弹性布局<br/>- grid：网格布局<br/>- none：不渲染此元素<br />-inline-flex<sup>9+</sup>：当设置为inline-flex 时，同时具备flex样式和inline-block的效果 | 35| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。<br/>示例：如设置grid-template-columns为：<br/>- 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；<br/>- 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；<br/>- 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；<br/>- repeat(2,100px)：分两列，第一列100px，第二列100px；<br/>- repeat(auto-fill,100px)<sup>5+</sup>：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；<br/>- auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 | 36| grid-[columns\|rows]-gap | <length> | 0 | 否 | 用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。 | 37| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 | 38| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 | 39| grid-auto-flow<sup>5+</sup> | string | - | 否 | 使用框架自动布局算法进行网格的布局，可选值为：<br/>- row：逐行填充元素，如果行空间不够，则新增行；<br/>- column：逐列填充元素，如果列空间不够，则新增列。 | 40| overflow<sup>6+</sup> | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。<br/>- visible：多个子元素内容超过元素大小时，显示在元素外面；<br/>- hidden：元素内容超过元素大小时，进行裁切显示；<br/>- scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。<br/>overflow: scroll样式需要元素设置固定的大小，默认滚动方向与容器方向一致。 | 41| align-items<sup>6+</sup> | string | - | 否 | 设置容器中元素交叉轴上的对齐方式：<br/>- stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；<br/>- flex-start：Flex布局容器内元素向交叉轴起点对齐；<br/>- flex-end：Flex布局容器内元素向交叉轴终点对齐；<br/>- center：Flex布局容器内元素在交叉轴居中对齐；<br/>- baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 | 42| scrollbar-color<sup>6+</sup> | <color> | - | 否 | 设置滚动条的颜色。 | 43| scrollbar-width<sup>6+</sup> | <length> | - | 否 | 设置滚动条的宽度。 | 44| overscroll-effect<sup>6+</sup> | string | - | 否 | 设置滚动边缘效果，可选值为：<br/>- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；<br/>- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；<br/>- none：滑动到边缘后无效果 | 45 46 47## 事件 48 49 50 51除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 52 53| 名称 | 参数 | 描述 | 54| ------------------------ | ---- | ---------------------------------------- | 55| reachstart<sup>6+</sup> | - | 当页面滑动到最开始的点时触发的事件回调，当flex-direction: row时才会触发。 | 56| reachend<sup>6+</sup> | - | 当页面滑动到最末尾的点时触发的事件回调，当flex-direction: row时才会触发。 | 57| reachtop<sup>6+</sup> | - | 当页面滑动到最上部的点时触发的事件回调，当flex-direction: column时才会触发。 | 58| reachbottom<sup>6+</sup> | - | 当页面滑动到最下部的点时触发的事件回调，当flex-direction: column时才会触发。 | 59 60## 方法 61 62除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 63 64| 名称 | 参数 | 返回值 | 描述 | 65| ---------------------------- | ----------- | ------------ | --------------------------------------- | 66| getScrollOffset<sup>6+</sup> | - | ScrollOffset | 获取元素内容的滚动偏移。<br/>需要设置overflow样式为scroll。 | 67| scrollBy<sup>6+</sup> | ScrollParam | - | 指定元素内容的滚动偏移。<br/>需要设置overflow样式为scroll。 | 68 69**表1** ScrollOffset<sup>6+</sup> 70 71| 名称 | 类型 | 描述 | 72| ---- | ------ | --------------- | 73| x | number | 在x轴方向的偏移，单位为px。 | 74| y | number | 在y轴方向的偏移，单位为px。 | 75 76**表2** ScrollParam<sup>6+</sup> 77 78| 名称 | 类型 | 描述 | 79| ------ | ------- | ---------------- | 80| dx | number | 水平方向滑动的偏移量，单位px。 | 81| dy | number | 垂直方向滑动的偏移量，单位px。 | 82| smooth | boolean | 是否平滑处理。 | 83 84 85## 示例 86 871. Flex样式 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样式 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样式 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. 拖拽<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 } 260 .content{ 261 width: 200px; 262 height: 200px; 263 background-color: red; 264 } 265 ``` 266 267 ```js 268 // xxx.js 269 import prompt from '@system.prompt'; 270 export default { 271 data:{ 272 left:0, 273 top:0, 274 }, 275 dragstart(e){ 276 prompt.showToast({ 277 message: 'Start to be dragged' 278 }) 279 }, 280 drag(e){ 281 this.left = e.globalX; 282 this.top = e.globalY; 283 }, 284 dragend(e){ 285 prompt.showToast({ 286 message: 'End Drag' 287 }) 288 }, 289 } 290 ``` 291 292  293 294 ```html 295 <!-- xxx.hml --> 296 <div class="container"> 297 <div class="content" ondrag="drag" style="position: absolute;left: {{left}};top: {{top}};"></div> 298 <div style="width: 500px; height: 500px; background-color: yellow; position: fixed; left: 15%; top: 30%; opacity:0.3" 299 ondragenter="dragenter" ondragover="dragover" ondragleave="dragleave" ondrop="drop"> 300 </div> 301 </div> 302 ``` 303 304 ```css 305 /* xxx.css */ 306 .container { 307 flex-direction: column; 308 width: 100%; 309 position: relative; 310 max-width: 100%; 311 } 312 .content{ 313 width: 200px; 314 height: 200px; 315 background-color: red; 316 position: absolute; 317 } 318 ``` 319 320 ```js 321 // xxx.js 322 import prompt from '@system.prompt'; 323 export default { 324 data:{ 325 left:0, 326 top:0, 327 }, 328 drag(e){ 329 this.left = e.globalX; 330 this.top = e.globalY; 331 }, 332 dragenter(e){ 333 prompt.showToast({ 334 message: 'enter' 335 }) 336 }, 337 dragover(e){ 338 prompt.showToast({ 339 message: 'over' 340 }) 341 }, 342 dragleave(e){ 343 prompt.showToast({ 344 message: 'leave' 345 }) 346 }, 347 drop(e){ 348 prompt.showToast({ 349 message: 'drop' 350 }) 351 } 352 } 353 ``` 354 355  356 3575. 手指捏合<sup>7+</sup> 358 ```html 359 <!-- xxx.hml --> 360 <div class="container"> 361 <div class="content "onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate" 362 onpinchcancel=" pinchcancel"> 363 </div> 364 </div> 365 ``` 366 367 ```css 368 /* xxx.css */ 369 .container { 370 flex-direction: column; 371 justify-content: center; 372 align-items: center; 373 width: 454px; 374 height: 454px;} 375 .content{ 376 width: 400px; 377 height: 400px; 378 background-color: aqua; 379 margin:30px 380 } 381 ``` 382 383 ```js 384 // xxx.js 385 import prompt from '@system.prompt'; 386 export default { 387 pinchstart(e){ 388 prompt.showToast({ 389 message: 'pinchstart!!!' 390 }) 391 }, 392 pinchupdate(e){ 393 prompt.showToast({ 394 message: 'Two-finger pinch update' 395 }) 396 }, 397 pinchend(e){ 398 prompt.showToast({ 399 message: 'Finished with two fingers pinching' 400 }) 401 }, 402 pinchcancel(e){ 403 prompt.showToast({ 404 message: 'Finger pinching is interrupted' 405 }) 406 } 407 } 408 ``` 409 410  411
