Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
9c47655a
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
9c47655a
编写于
5月 26, 2022
作者:
O
openharmony_ci
提交者:
Gitee
5月 26, 2022
浏览文件
操作
浏览文件
下载
差异文件
!4325 支持盒式模型和box-sizing
Merge pull request !4325 from Yao.inhome/baihe_boxsizing_0413
上级
7150a768
9c8b615c
变更
3
展开全部
隐藏空白更改
内联
并排
Showing
3 changed file
with
75 addition
and
58 deletion
+75
-58
zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214837129.png
...ference/arkui-js/figures/zh-cn_image_0000001214837129.png
+0
-0
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
...ion-dev/reference/arkui-js/js-components-common-styles.md
+74
-57
zh-cn/application-dev/reference/arkui-js/js-components-container-div.md
...ion-dev/reference/arkui-js/js-components-container-div.md
+1
-1
未找到文件。
zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214837129.png
0 → 100644
浏览文件 @
9c47655a
11.6 KB
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
浏览文件 @
9c47655a
此差异已折叠。
点击以展开。
zh-cn/application-dev/reference/arkui-js/js-components-container-div.md
浏览文件 @
9c47655a
...
...
@@ -31,7 +31,7 @@
| 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>
:
均匀排列每个元素,每个元素之间的间隔相等。 |
| align-items | string | stretch
<br/>
| 否 | flex容器当前行的交叉轴对齐格式,可选值为:
<br/>
-
stretch:弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
<br/>
-
flex-start:元素向交叉轴起点对齐。
<br/>
-
flex-end:元素向交叉轴终点对齐。
<br/>
-
center:元素在交叉轴居中。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时,多行内容对齐格式,可选值为:
<br/>
-
flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
<br/>
-
flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
<br/>
-
center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
<br/>
-
space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
<br/>
-
space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
| display | string | flex | 否 | 确定该元素视图框的类型,该值暂不支持动态修改。可选值为:
<br/>
-
flex:弹性布局
<br/>
-
grid:网格布局
<br/>
-
none:不渲染此元素 |
| display | string | flex | 否 | 确定该元素视图框的类型,该值暂不支持动态修改。可选值为:
<br/>
-
flex:弹性布局
<br/>
-
grid:网格布局
<br/>
-
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/>
-
50px
100px
60px:分三列,第一列50px,第二列100px,第三列60px;
<br/>
-
1fr
1fr
2fr:分三列,将父组件允许的宽分为4等份,第一列占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:分三列,第一列自适应内部子组件所需宽度,剩余空间分为两等份,第二列占一份,第三列占一份。 |
| grid-[columns
\|
rows]-gap |
<
length
>
| 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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录