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