1# div 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @lanshouren--> 5<!--Designer: @lanshouren--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11 12基础容器，用作页面结构的根节点或将内容进行分组。 13 14## 权限列表 15 16无 17 18 19## 子组件 20 21支持。 22 23 24## 属性 25 26支持[通用属性](js-components-common-attributes.md)。 27 28 29## 样式 30 31除支持组件[通用样式](js-components-common-styles.md)外，还支持如下样式： 32 33| 名称 | 类型 | 默认值 | 必填 | 描述 | 34| ------------------------------ | -------------- | ------------ | ---- | ------------------------------------------------------------ | 35| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：<br/>- column：垂直方向从上到下。<br/>- row：水平方向从左到右。 | 36| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：<br/>- nowrap：不换行，单行显示。<br/>- wrap：换行，多行显示。 | 37| 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>: 均匀排列每个元素，每个元素之间的间隔相等。 | 38| align-items | string | stretch<br/> | 否 | flex容器当前行的交叉轴对齐格式，可选值为：<br/>- stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>- flex-start：元素向交叉轴起点对齐。<br/>- flex-end：元素向交叉轴终点对齐。<br/>- center：元素在交叉轴居中。<br/>- baseline：如Flex布局纵向排列，则该值与’flex-start‘等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 | 39| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：<br/>- flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>- flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>- center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>- space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>- space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 | 40| 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：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 | 41| grid-[columns\|rows]-gap | <length> | 0 | 否 | 用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。 | 42| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 | 43| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 | 44| grid-auto-flow<sup>5+</sup> | string | - | 否 | 使用框架自动布局算法进行网格的布局，可选值为：<br/>- row：逐行填充元素，如果行空间不够，则新增行；<br/>- column：逐列填充元素，如果列空间不够，则新增列。 | 45| overflow<sup>6+</sup> | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。<br/>- visible：多个子元素内容超过元素大小时，显示在元素外面；<br/>- hidden：元素内容超过元素大小时，进行裁切显示；<br/>- scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。<br/>overflow: scroll样式需要元素设置固定的大小，默认滚动方向与容器方向一致。 | 46| 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'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 | 47| scrollbar-color<sup>6+</sup> | <color> | - | 否 | 设置滚动条的颜色。 | 48| scrollbar-width<sup>6+</sup> | <length> | - | 否 | 设置滚动条的宽度。 | 49| overscroll-effect<sup>6+</sup> | string | - | 否 | 设置滚动边缘效果，可选值为：<br/>- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；<br/>- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；<br/>- none：滑动到边缘后无效果 | 50 51 52## 事件 53 54 55 56除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 57 58| 名称 | 参数 | 描述 | 59| ------------------------ | ---- | ---------------------------------------- | 60| reachstart<sup>6+</sup> | - | 当页面滑动到最开始的点时触发的事件回调，当flex-direction: row时才会触发。 | 61| reachend<sup>6+</sup> | - | 当页面滑动到最末尾的点时触发的事件回调，当flex-direction: row时才会触发。 | 62| reachtop<sup>6+</sup> | - | 当页面滑动到最上部的点时触发的事件回调，当flex-direction: column时才会触发。 | 63| reachbottom<sup>6+</sup> | - | 当页面滑动到最下部的点时触发的事件回调，当flex-direction: column时才会触发。 | 64 65## 方法 66 67除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 68 69| 名称 | 参数 | 返回值 | 描述 | 70| ---------------------------- | ----------- | ------------ | --------------------------------------- | 71| getScrollOffset<sup>6+</sup> | - | ScrollOffset | 获取元素内容的滚动偏移。<br/>需要设置overflow样式为scroll。 | 72| scrollBy<sup>6+</sup> | ScrollParam | - | 指定元素内容的滚动偏移。<br/>需要设置overflow样式为scroll。 | 73 74**表1** ScrollOffset<sup>6+</sup> 75 76| 名称 | 类型 | 描述 | 77| ---- | ------ | --------------- | 78| x | number | 在x轴方向的偏移，单位为px。 | 79| y | number | 在y轴方向的偏移，单位为px。 | 80 81**表2** ScrollParam<sup>6+</sup> 82 83| 名称 | 类型 | 描述 | 84| ------ | ------- | ---------------- | 85| dx | number | 水平方向滑动的偏移量，单位px。 | 86| dy | number | 垂直方向滑动的偏移量，单位px。 | 87| smooth | boolean | 是否平滑处理。设置为true时表示平滑处理，设置为false时表示不平滑处理。 | 88 89 90## 示例 91 921. Flex样式 93 ```html 94 <!-- xxx.hml --> 95 <div class="container"> 96 <div class="flex-box"> 97 <div class="flex-item color-primary"></div> 98 <div class="flex-item color-warning"></div> 99 <div class="flex-item color-success"></div> 100 </div> 101 </div> 102 ``` 103 104 ```css 105 /* xxx.css */ 106 .container { 107 flex-direction: column; 108 justify-content: center; 109 align-items: center; 110 width: 454px; 111 height: 454px; 112 } 113 .flex-box { 114 justify-content: space-around; 115 align-items: center; 116 width: 400px; 117 height: 140px; 118 background-color: #ffffff; 119 } 120 .flex-item { 121 width: 120px; 122 height: 120px; 123 border-radius: 16px; 124 } 125 .color-primary { 126 background-color: #007dff; 127 } 128 .color-warning { 129 background-color: #ff7500; 130 } 131 .color-success { 132 background-color: #41ba41; 133 } 134 ``` 135 136  137 1382. Flex Wrap样式 139 ```html 140 <!-- xxx.hml --> 141 <div class="container"> 142 <div class="flex-box"> 143 <div class="flex-item color-primary"></div> 144 <div class="flex-item color-warning"></div> 145 <div class="flex-item color-success"></div> 146 </div> 147 </div> 148 ``` 149 150 ```css 151 /* xxx.css */ 152 .container { 153 flex-direction: column; 154 justify-content: center; 155 align-items: center; 156 width: 454px; 157 height: 454px; 158 } 159 .flex-box { 160 justify-content: space-around; 161 align-items: center; 162 flex-wrap: wrap; 163 width: 300px; 164 height: 250px; 165 background-color: #ffffff; 166 } 167 .flex-item { 168 width: 120px; 169 height: 120px; 170 border-radius: 16px; 171 } 172 .color-primary { 173 background-color: #007dff; 174 } 175 .color-warning { 176 background-color: #ff7500; 177 } 178 .color-success { 179 background-color: #41ba41; 180 } 181 ``` 182 183  184 1853. Grid样式 186 187 ```html 188 <!-- xxx.hml --> 189 <div class="common grid-parent"> 190 <div class="grid-child grid-left-top"></div> 191 <div class="grid-child grid-left-bottom"></div> 192 <div class="grid-child grid-right-top"></div> 193 <div class="grid-child grid-right-bottom"></div> 194 </div> 195 ``` 196 197 ```css 198 /* xxx.css */ 199 .common { 200 width: 400px; 201 height: 400px; 202 background-color: #ffffff; 203 align-items: center; 204 justify-content: center; 205 margin: 24px; 206 } 207 .grid-parent { 208 display: grid; 209 grid-template-columns: 35% 35%; 210 grid-columns-gap: 24px; 211 grid-rows-gap: 24px; 212 grid-template-rows: 35% 35%; 213 } 214 .grid-child { 215 width: 100%; 216 height: 100%; 217 border-radius: 8px; 218 } 219 .grid-left-top { 220 grid-row-start: 0; 221 grid-column-start: 0; 222 grid-row-end: 0; 223 grid-column-end: 0; 224 background-color: #3f56ea; 225 } 226 .grid-left-bottom { 227 grid-row-start: 1; 228 grid-column-start: 0; 229 grid-row-end: 1; 230 grid-column-end: 0; 231 background-color: #00aaee; 232 } 233 .grid-right-top { 234 grid-row-start: 0; 235 grid-column-start: 1; 236 grid-row-end: 0; 237 grid-column-end: 1; 238 background-color: #00bfc9; 239 } 240 .grid-right-bottom { 241 grid-row-start: 1; 242 grid-column-start: 1; 243 grid-row-end: 1; 244 grid-column-end: 1; 245 background-color: #47cc47; 246 } 247 ``` 248 249  250 2514. 拖拽<sup>7+</sup> 252 ```html 253 <!-- xxx.hml --> 254 <div class="container"> 255 <div class="content" ondragstart="dragstart" ondrag="drag" ondragend="dragend" style="position: absolute;left: {{left}};top: {{top}};"> 256 </div> 257 </div> 258 ``` 259 260 ```css 261 /* xxx.css */ 262 .container { 263 flex-direction: column; 264 width: 100%; 265 height: 100%; 266 } 267 .content { 268 width: 200px; 269 height: 200px; 270 background-color: red; 271 } 272 ``` 273 274 ```js 275 // xxx.js 276 import promptAction from '@ohos.promptAction'; 277 export default { 278 data:{ 279 left:0, 280 top:0, 281 }, 282 dragstart(e){ 283 promptAction.showToast({ 284 message: 'Start to be dragged' 285 }) 286 }, 287 drag(e){ 288 this.left = e.globalX; 289 this.top = e.globalY; 290 }, 291 dragend(e){ 292 promptAction.showToast({ 293 message: 'End Drag' 294 }) 295 } 296 } 297 ``` 298 299  300 301 ```html 302 <!-- xxx.hml --> 303 <div class="container"> 304 <div class="content" ondrag="drag" style="position: absolute;left: {{left}};top: {{top}};"></div> 305 <div style="width: 500px; height: 500px; background-color: yellow; position: fixed; left: 15%; top: 30%; opacity:0.3" 306 ondragenter="dragenter" ondragover="dragover" ondragleave="dragleave" ondrop="drop"> 307 </div> 308 </div> 309 ``` 310 311 ```css 312 /* xxx.css */ 313 .container { 314 flex-direction: column; 315 width: 100%; 316 position: relative; 317 max-width: 100%; 318 } 319 .content{ 320 width: 200px; 321 height: 200px; 322 background-color: red; 323 position: absolute; 324 } 325 ``` 326 327 ```js 328 // xxx.js 329 import promptAction from '@ohos.promptAction'; 330 export default { 331 data:{ 332 left:0, 333 top:0, 334 }, 335 drag(e){ 336 this.left = e.globalX; 337 this.top = e.globalY; 338 }, 339 dragenter(e){ 340 promptAction.showToast({ 341 message: 'enter' 342 }) 343 }, 344 dragover(e){ 345 promptAction.showToast({ 346 message: 'over' 347 }) 348 }, 349 dragleave(e){ 350 promptAction.showToast({ 351 message: 'leave' 352 }) 353 }, 354 drop(e){ 355 promptAction.showToast({ 356 message: 'drop' 357 }) 358 } 359 } 360 ``` 361 362  363 3645. 手指捏合<sup>7+</sup> 365 ```html 366 <!-- xxx.hml --> 367 <div class="container"> 368 <div class="content" onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate" 369 onpinchcancel="pinchcancel"> 370 </div> 371 </div> 372 ``` 373 374 ```css 375 /* xxx.css */ 376 .container { 377 flex-direction: column; 378 justify-content: center; 379 align-items: center; 380 width: 454px; 381 height: 454px; 382 } 383 .content { 384 width: 400px; 385 height: 400px; 386 background-color: aqua; 387 margin: 30px; 388 } 389 ``` 390 391 ```js 392 // xxx.js 393 import promptAction from '@ohos.promptAction'; 394 export default { 395 pinchstart(e){ 396 promptAction.showToast({ 397 message: 'pinchstart!!!' 398 }) 399 }, 400 pinchupdate(e){ 401 promptAction.showToast({ 402 message: 'Two-finger pinch update' 403 }) 404 }, 405 pinchend(e){ 406 promptAction.showToast({ 407 message: 'Finished with two fingers pinching' 408 }) 409 }, 410 pinchcancel(e){ 411 promptAction.showToast({ 412 message: 'Finger pinching is interrupted' 413 }) 414 } 415 } 416 ``` 417 418  419
