未验证 提交 9c47655a 编写于 作者: O openharmony_ci 提交者: Gitee

!4325 支持盒式模型和box-sizing

Merge pull request !4325 from Yao.inhome/baihe_boxsizing_0413
......@@ -31,7 +31,7 @@
| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有:<br/>-&nbsp;flex-start:项目位于容器的开头。<br/>-&nbsp;flex-end:项目位于容器的结尾。<br/>-&nbsp;center:项目位于容器的中心。<br/>-&nbsp;space-between:项目位于各行之间留有空白的容器内。<br/>-&nbsp;space-around:项目位于各行之前、之间、之后都留有空白的容器内。<br/>-&nbsp;space-evenly<sup>5+</sup>:&nbsp;&nbsp;均匀排列每个元素,每个元素之间的间隔相等。 |
| align-items | string | stretch<br/> | 否 | flex容器当前行的交叉轴对齐格式,可选值为:<br/>-&nbsp;stretch:弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start:元素向交叉轴起点对齐。<br/>-&nbsp;flex-end:元素向交叉轴终点对齐。<br/>-&nbsp;center:元素在交叉轴居中。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时,多行内容对齐格式,可选值为:<br/>-&nbsp;flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>-&nbsp;flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>-&nbsp;center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>-&nbsp;space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>-&nbsp;space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
| display | string | flex | 否 | 确定该元素视图框的类型,该值暂不支持动态修改。可选值为:<br/>-&nbsp;flex:弹性布局<br/>-&nbsp;grid:网格布局<br/>-&nbsp;none:不渲染此元素 |
| display | string | flex | 否 | 确定该元素视图框的类型,该值暂不支持动态修改。可选值为:<br/>-&nbsp;flex:弹性布局<br/>-&nbsp;grid:网格布局<br/>-&nbsp;none:不渲染此元素<br />-inline-flex<sup>9+</sup>:当设置为inline-flex 时,同时具备flex样式和inline-block的效果 |
| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量,不设置时默认1行1列,仅当display为grid时生效。<br/>示例:如设置grid-template-columns为:<br/>-&nbsp;50px&nbsp;100px&nbsp;60px:分三列,第一列50px,第二列100px,第三列60px;<br/>-&nbsp;1fr&nbsp;1fr&nbsp;2fr:分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份;<br/>-&nbsp;30%&nbsp;20%&nbsp;50%:分三列,将父组件允许的宽为基准,第一列占30%,第二列占20%,第三列占50%;<br/>-&nbsp;repeat(2,100px):分两列,第一列100px,第二列100px;<br/>-&nbsp;repeat(auto-fill,100px)<sup>5+</sup>:按照每列100px的大小和交叉轴大小计算最大正整数重复次数,按照该重复次数布满交叉轴;<br/>-&nbsp;auto&nbsp;1fr&nbsp;1fr:分三列,第一列自适应内部子组件所需宽度,剩余空间分为两等份,第二列占一份,第三列占一份。 |
| grid-[columns\|rows]-gap | &lt;length&gt; | 0 | 否 | 用于设置行与行的间距或者列与列的间距,也可以支持通过grid-gap设置相同的行列间距,仅当display为grid时生效。 |
| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册