flex-direction
|
string
|
row
|
否
|
flex容器主轴方向。可选项有：
- column：垂直方向从上到下
- row：水平方向从左到右
|
flex-wrap
|
string
|
nowrap
|
否
|
flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：
- nowrap：不换行，单行显示。
- wrap：换行，多行显示。
|
justify-content
|
string
|
flex-start
|
否
|
flex容器当前行的主轴对齐格式。可选项有：
- flex-start：项目位于容器的开头。
- flex-end：项目位于容器的结尾。
- center：项目位于容器的中心。
- space-between：项目位于各行之间留有空白的容器内。
- space-around：项目位于各行之前、之间、之后都留有空白的容器内。
- space-evenly5+: 均匀排列每个元素，每个元素之间的间隔相等。
|
align-items
|
string
|
stretch
|
否
|
flex容器当前行的交叉轴对齐格式，可选值为：
- stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start：元素向交叉轴起点对齐。
- flex-end：元素向交叉轴终点对齐。
- center：元素在交叉轴居中。
|
align-content
|
string
|
flex-start
|
否
|
交叉轴中有额外的空间时，多行内容对齐格式，可选值为：
- flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
- flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
- center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
- space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
- space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
|
display
|
string
|
flex
|
否
|
确定该元素视图框的类型，该值暂不支持动态修改。可选值为：
- flex：弹性布局
- grid：网格布局
- none：不渲染此元素
|
grid-template-[columns|rows]
|
string
|
1行1列
|
否
|
用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。
示例：如设置grid-template-columns为：
- 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；
- 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；
- 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；
- repeat(2,100px)：分两列，第一列100px，第二列100px；
- repeat(auto-fill,100px)5+：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；
- auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。
|
grid-[columns|rows]-gap
|
<length>
|
0
|
否
|
用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。
|
grid-row-[start|end]
|
number
|
-
|
否
|
用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。
|
grid-column-[start|end]
|
number
|
-
|
否
|
用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。
|
grid-auto-flow5+
|
string
|
-
|
否
|
使用框架自动布局算法进行网格的布局，可选值为：
- row：逐行填充元素，如果行空间不够，则新增行；
- column：逐列填充元素，如果列空间不够，则新增列。
|
width
|
<length> | <percentage>
|
-
|
否
|
设置组件自身的宽度。
缺省时使用元素自身内容需要的宽度。
|
height
|
<length> | <percentage>
|
-
|
否
|
设置组件自身的高度。
缺省时使用元素自身内容需要的高度。
|
padding
|
<length> | <percentage>5+
|
0
|
否
|
使用简写属性设置所有的内边距属性。
该属性可以有1到4个值： 指定一个值时，该值指定四个边的内边距。
指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。
|
padding-[left|top|right|bottom]
|
<length> | <percentage>5+
|
0
|
否
|
设置左、上、右、下内边距属性。
|
padding-[start|end]
|
<length> | <percentage>5+
|
0
|
否
|
设置起始和末端内边距属性。
|
margin
|
<length> | <percentage>5+
|
0
|
否
|
使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
只有一个值时，这个值会被指定给全部的四个边。
两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。
|
margin-[left|top|right|bottom]
|
<length> | <percentage>5+
|
0
|
否
|
设置左、上、右、下外边距属性。
|
margin-[start|end]
|
<length> | <percentage>5+
|
0
|
否
|
设置起始和末端外边距属性。
|
border
|
-
|
0
|
否
|
使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。
|
border-style
|
string
|
solid
|
否
|
使用简写属性设置所有边框的样式，可选值为：
- dotted：显示为一系列圆点，圆点半径为border-width的一半。
- dashed：显示为一系列短的方形虚线。
|
border-[left|top|right|bottom]-style
|
string
|
solid
|
否
|
分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。
|
border-[left|top|right|bottom]
|
-
|
-
|
否
|
使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。
|
border-width
|
<length>
|
0
|
否
|
使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。
|
border-[left|top|right|bottom]-width
|
<length>
|
0
|
否
|
分别设置左、上、右、下四个边框的宽度。
|
border-color
|
<color>
|
black
|
否
|
使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。
|
border-[left|top|right|bottom]-color
|
<color>
|
black
|
否
|
分别设置左、上、右、下四个边框的颜色。
|
border-radius
|
<length>
|
-
|
否
|
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）。
|
border-[top|bottom]-[left|right]-radius
|
<length>
|
-
|
否
|
分别设置左上，右上，右下和左下四个角的圆角半径。
|
background
|
<linear-gradient>
|
-
|
否
|
仅支持设置渐变样式，与background-color、background-image不兼容。
|
background-color
|
<color>
|
-
|
否
|
设置背景颜色。
|
background-image
|
string
|
-
|
否
|
设置背景图片。与background-color、background不兼容；支持本地图片资源地址。
示例：
- background-image: url("/common/background.png")
|
background-size
|
- string
- <length> <length>
- <percentage> <percentage>
|
auto
|
否
|
设置背景图片的大小。
|
background-repeat
|
string
|
repeat
|
否
|
针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。
- repeat：在水平轴和竖直轴上同时重复绘制图片。
- repeat-x：只在水平轴上重复绘制图片。
- repeat-y：只在竖直轴上重复绘制图片。
- no-repeat：不会重复绘制图片。
|
background-position
|
- string string
- <length> <length>
- <percentage> <percentage>
|
0px 0px
|
否
|
- 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
- left：水平方向上最左侧。
- right：水平方向上最右侧。
- top：竖直方向上最顶部。
- bottom：竖直方向上最底部。
- center：水平方向或竖直方向上中间位置。
- length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
- 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
- 可以混合使用<percentage>和<length>
|
opacity
|
number
|
1
|
否
|
元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。
|
visibility
|
string
|
visible
|
否
|
是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：
- visible：元素正常显示。
- hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
说明： visibility和display样式都设置时，仅display生效
|
flex
|
-
|
-
|
否
|
规定当前组件如何适应父组件中的可用空间。
flex可以指定1个，2个5+或3个5+值。
单值语法：
- 一个无单位数：用来设置组件的flex-grow
- 一个有效的宽度值5+：用来设置组件的flex-basis
双值语法5+：
第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：
- 一个无单位数：用来设置组件的flex-shrink
- 一个有效的宽度值：用来设置组件的flex-basis
三值语法5+：
第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。
说明： 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。
|
flex-grow
|
number
|
0
|
否
|
设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。
说明： 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。
|
flex-shrink
|
number
|
1
|
否
|
设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。
说明： 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。
|
flex-basis
|
<length>
|
-
|
否
|
设置组件在主轴方向上的初始大小。
说明： 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。
|
position
|
string
|
relative
|
否
|
设置元素的定位类型，不支持动态变更。
- fixed：相对与整个界面进行定位。
- absolute：相对于父元素进行定位。
- relative：相对于其正常位置进行定位。
说明： absolute属性仅在父容器为<div>、<stack>时生效。
|
[left|top|right|bottom]
|
<length>
|
-
|
否
|
left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
- right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
- bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
|