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> 14> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 15 16## 子组件 17 18支持。 19 20 21## 属性 22 23支持[通用属性](js-service-widget-common-attributes.md)。 24 25 26## 样式 27 28除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式： 29 30| 名称 | 类型 | 默认值 | 必填 | 描述 | 31| -------- | -------- | -------- | -------- | -------- | 32| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：<br/>- column：垂直方向从上到下。<br/>- row：水平方向从左到右。 | 33| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：<br/>- nowrap：不换行，单行显示。<br/>- wrap：换行，多行显示。 | 34| 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>: 均匀排列每个元素，每个元素之间的间隔相等。 | 35| align-items | string | stretch | 否 | flex容器当前行的交叉轴对齐格式，可选值为：<br/>- stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>- flex-start：元素向交叉轴起点对齐。<br/>- flex-end：元素向交叉轴终点对齐。<br/>- center：元素在交叉轴居中。 | 36| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：<br/>- flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>- flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>- center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>- space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>- space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 | 37| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：<br/>- flex：弹性布局<br/>- none：不渲染此元素 | 38| 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份，第二列占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：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 | 39| grid-[columns\|rows]-gap | <length> | 0 | 否 | 用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。 | 40| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 | 41| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 | 42| grid-auto-flow | string | - | 否 | 使用框架自动布局算法进行网格的布局，可选值为：<br/>- row：逐行填充元素，如果行空间不够，则新增行。<br/>- column：逐列填充元素，如果列空间不够，则新增列。 | 43| align-items | string | - | 否 | 设置容器中元素交叉轴上的对齐方式：<br/>- stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>- flex-start：Flex布局容器内元素向交叉轴起点对齐。<br/>- flex-end：Flex布局容器内元素向交叉轴终点对齐。<br/>- center：Flex布局容器内元素在交叉轴居中对齐。<br/>- baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 | 44 45 46## 事件 47 48支持[通用事件](js-service-widget-common-events.md)。 49 50 51## 示例 52 531. Flex样式 54 55 ```html 56 <!-- xxx.hml --> 57 <div class="container"> 58 <div class="flex-box"> 59 <div class="flex-item color-primary"></div> 60 <div class="flex-item color-warning"></div> 61 <div class="flex-item color-success"></div> 62 </div> 63 </div> 64 ``` 65 66 67 ```css 68 /* xxx.css */ 69 .container { 70 flex-direction: column; 71 justify-content: center; 72 align-items: center; 73 width: 454px; 74 height: 454px; 75 } 76 .flex-box { 77 justify-content: space-around; 78 align-items: center; 79 width: 400px; 80 height: 140px; 81 background-color: #ffffff; 82 } 83 .flex-item { 84 width: 120px; 85 height: 120px; 86 border-radius: 16px; 87 } 88 .color-primary { 89 background-color: #007dff; 90 } 91 .color-warning { 92 background-color: #ff7500; 93 } 94 .color-success { 95 background-color: #41ba41; 96 } 97 ``` 98 **2*4卡片** 99 100  101 1022. Flex Wrap样式 103 104 ```html 105 <!-- xxx.hml --> 106 <div class="container"> 107 <div class="flex-box"> 108 <div class="flex-item color-primary"></div> 109 <div class="flex-item color-warning"></div> 110 <div class="flex-item color-success"></div> 111 </div> 112 </div> 113 ``` 114 115 116 ```css 117 /* xxx.css */ 118 .container { 119 flex-direction: column; 120 justify-content: center; 121 align-items: center; 122 width: 454px; 123 height: 454px; 124 } 125 .flex-box { 126 justify-content: space-around; 127 align-items: center; 128 flex-wrap: wrap; 129 width: 300px; 130 height: 250px; 131 background-color: #ffffff; 132 } 133 .flex-item { 134 width: 120px; 135 height: 120px; 136 border-radius: 16px; 137 } 138 .color-primary { 139 background-color: #007dff; 140 } 141 .color-warning { 142 background-color: #ff7500; 143 } 144 .color-success { 145 background-color: #41ba41; 146 } 147 ``` 148 **4*4卡片** 149 150  151 152
