div
基础容器,用作页面结构的根节点或将内容进行分组。
权限列表
无
子组件
支持。
属性
事件
样式
|
||||
flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:
|
||||
|
||||
|
||||
|
||||
用于设置当前网格布局行和列的数量,不设置时默认1行1列,仅当display为grid时生效。
|
||||
用于设置行与行的间距或者列与列的间距,也可以支持通过grid-gap设置相同的行列间距,仅当display为grid时生效。 |
||||
用于设置当前元素在网格布局中的起止行号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 |
||||
用于设置当前元素在网格布局中的起止列号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 |
||||
|
||||
使用简写属性设置所有的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置时,各属性值为默认值。 |
||||
|
||||
使用简写属性设置对应位置的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置的值为默认值。 |
||||
border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width,border-[left|top|right|bottom]-color ,border-[left|top|right|bottom]-style,如果要设置color、width和style,需要将四个方向一起设置(border-width、border-color、border-style)。 |
||||
仅支持设置渐变样式,与background-color、background-image不兼容。 |
||||
设置背景图片。与background-color、background不兼容;支持本地图片资源地址。
|
||||
|
||||
针对重复背景图像样式进行设置,背景图像默认在水平和垂直方向上重复。
|
||||
|
|
|||
是否显示元素所产生的框。不可见的框会占用布局(将'display'属性设置为'none'来完全去除框),可选值为:
|
||||
第一个值必须是无单位数,用来设置组件的flex-grow。第二个值是以下之一:
第一个值必须是无单位数,用来设置组件的flex-grow;第二个值必须是无单位数,用来设置组件的flex-shrink;第三个值必须是一个有效的宽度值,用来设置组件的flex-basis。 |
||||
设置组件的拉伸样式,指定父组件容器主轴方向上剩余空间(容器本身大小减去所有flex子元素占用的大小)的分配权重。0为不伸展。 |
||||
|
||||
left|top|right|bottom需要配合position样式使用,来确定元素的偏移位置。
|
示例
-
Flex样式
<!-- xxx.hml --> <div class="container"> <div class="flex-box"> <div class="flex-item color-primary"></div> <div class="flex-item color-warning"></div> <div class="flex-item color-success"></div> </div> </div>
/* xxx.css */ .container { flex-direction: column; justify-content: center; align-items: center; width: 454px; height: 454px; } .flex-box { justify-content: space-around; align-items: center; width: 400px; height: 140px; background-color: #ffffff; } .flex-item { width: 120px; height: 120px; border-radius: 16px; } .color-primary { background-color: #007dff; } .color-warning { background-color: #ff7500; } .color-success { background-color: #41ba41; }
-
Flex Wrap样式
<!-- xxx.hml --> <div class="container"> <div class="flex-box"> <div class="flex-item color-primary"></div> <div class="flex-item color-warning"></div> <div class="flex-item color-success"></div> </div> </div>
/* xxx.css */ .container { flex-direction: column; justify-content: center; align-items: center; width: 454px; height: 454px; } .flex-box { justify-content: space-around; align-items: center; flex-wrap: wrap; width: 300px; height: 250px; background-color: #ffffff; } .flex-item { width: 120px; height: 120px; border-radius: 16px; } .color-primary { background-color: #007dff; } .color-warning { background-color: #ff7500; } .color-success { background-color: #41ba41; }
-
Grid样式
<!-- xxx.hml --> <div class="common grid-parent"> <div class="grid-child grid-left-top"></div> <div class="grid-child grid-left-bottom"></div> <div class="grid-child grid-right-top"></div> <div class="grid-child grid-right-bottom"></div> </div>
/* xxx.css */ .common { width: 400px; height: 400px; background-color: #ffffff; align-items: center; justify-content: center; margin: 24px; } .grid-parent { display: grid; grid-template-columns: 50% 50%; grid-columns-gap: 24px; grid-rows-gap: 24px; grid-template-rows: 50% 50%; } .grid-child { width: 100%; height: 100%; border-radius: 8px; } .grid-left-top { grid-row-start: 0; grid-column-start: 0; grid-row-end: 0; grid-column-end: 0; background-color: #3f56ea; } .grid-left-bottom { grid-row-start: 1; grid-column-start: 0; grid-row-end: 1; grid-column-end: 0; background-color: #00aaee; } .grid-right-top { grid-row-start: 0; grid-column-start: 1; grid-row-end: 0; grid-column-end: 1; background-color: #00bfc9; } .grid-right-bottom { grid-row-start: 1; grid-column-start: 1; grid-row-end: 1; grid-column-end: 1; background-color: #47cc47; }