1# div 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @lanshouren--> 5<!--Designer: @lanshouren--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9基础容器，用作页面结构的根节点或将内容进行分组。 10 11> **说明：** 12> 13> 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15 16## 子组件 17 18支持。 19 20 21## 属性 22 23| 名称 | 类型 | 默认值 | 必填 | 描述 | 24| -------- | -------- | -------- | -------- | -------- | 25| id | string | - | 否 | 组件的唯一标识。 | 26| style | string | - | 否 | 组件的样式声明。 | 27| class | string | - | 否 | 组件的样式类，用于引用样式表。 | 28| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | 29 30 31## 事件 32 33| 名称 | 参数 | 描述 | 34| -------- | -------- | -------- | 35| click | - | 点击动作触发该事件。 | 36| longpress | - | 长按动作触发该事件。 | 37| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | 组件上快速滑动后触发。 | 38 39 40## 样式 41 42| 名称 | 类型 | 默认值 | 必填 | 描述 | 43| -------- | -------- | -------- | -------- | -------- | 44| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：<br/>- column：垂直方向从上到下<br/>- row：水平方向从左到右 | 45| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：<br/>- nowrap：不换行，单行显示。<br/>- wrap：换行，多行显示。 | 46| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：<br/>- flex-start：项目位于容器的开头。<br/>- flex-end：项目位于容器的结尾。<br/>- center：项目位于容器的中心。<br/>- space-between：项目位于各行之间留有空白的容器内。<br/>- space-around：项目位于各行之前、之间、之后都留有空白的容器内。 | 47| align-items | string | stretch<sup>5+</sup><br/>flex-start<sup>1-4</sup> | 否 | flex容器当前行的交叉轴对齐格式，可选值为：<br/>- stretch<sup>5+</sup>：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>- flex-start：元素向交叉轴起点对齐。<br/>- flex-end：元素向交叉轴终点对齐。<br/>- center：元素在交叉轴居中。 | 48| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：<br/>- flex：弹性布局<br/>- none：不渲染此元素 | 49| width | <length> \| <percentage><sup>5+</sup> | - | 否 | 设置组件自身的宽度。<br/>未设置时组件宽度默认为0。 | 50| height | <length> \| <percentage><sup>5+</sup> | - | 否 | 设置组件自身的高度。<br/>未设置时组件高度默认为0。 | 51| padding | <length> | 0 | 否 | 使用简写属性设置所有内边距。<br/> 该属性可以有1到4个值：<br/>- 指定一个值时，该值指定四个边的内边距。<br/>- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | 52| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | 53| margin | <length> \| <percentage><sup>5+</sup> | 0 | 否 | 使用简写属性设置所有外边距，该属性可以有1到4个值。<br/>- 只有一个值时，这个值会被指定给全部的四个边。<br/>- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。<br/>- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | 54| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | 否 | 设置左、上、右、下外边距属性。 | 55| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | 56| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | 57| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | 58| background-color | <color> | - | 否 | 设置背景颜色。 | 59| opacity<sup>5+</sup> | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | 60| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | 61 62 63## 示例 64 651. Flex样式 66 67 ```html 68 <!-- xxx.hml --> 69 <div class="container"> 70 <div class="flex-box"> 71 <div class="flex-item color-primary"></div> 72 <div class="flex-item color-warning"></div> 73 <div class="flex-item color-success"></div> 74 </div> 75 </div> 76 ``` 77 78 79 ```css 80 /* xxx.css */ 81 .container { 82 flex-direction: column; 83 justify-content: center; 84 align-items: center; 85 width: 454px; 86 height: 454px; 87 } 88 .flex-box { 89 justify-content: space-around; 90 align-items: center; 91 width: 400px; 92 height: 140px; 93 background-color: #ffffff; 94 } 95 .flex-item { 96 width: 120px; 97 height: 120px; 98 border-radius: 16px; 99 } 100 .color-primary { 101 background-color: #007dff; 102 } 103 .color-warning { 104 background-color: #ff7500; 105 } 106 .color-success { 107 background-color: #41ba41; 108 } 109 ``` 110 111  112 1132. Flex Wrap样式 114 115 ```html 116 <!-- xxx.hml --> 117 <div class="container"> 118 <div class="flex-box"> 119 <div class="flex-item color-primary"></div> 120 <div class="flex-item color-warning"></div> 121 <div class="flex-item color-success"></div> 122 </div> 123 </div> 124 ``` 125 126 127 ```css 128 /* xxx.css */ 129 .container { 130 flex-direction: column; 131 justify-content: center; 132 align-items: center; 133 width: 454px; 134 height: 454px; 135 } 136 .flex-box { 137 justify-content: space-around; 138 align-items: center; 139 flex-wrap: wrap; 140 width: 300px; 141 height: 250px; 142 background-color: #ffffff; 143 } 144 .flex-item { 145 width: 120px; 146 height: 120px; 147 border-radius: 16px; 148 } 149 .color-primary { 150 background-color: #007dff; 151 } 152 .color-warning { 153 background-color: #ff7500; 154 } 155 .color-success { 156 background-color: #41ba41; 157 } 158 ``` 159 160  161
