【图解鸿蒙】多组示例演示三个样式的组合用法

当咱们使用JavaScript开发鸿蒙手表的App时，在CSS文件中常常要用到这三个样式：flex-direction、justify-content和align-items。

 ● 样式flex-direction用于指定容器内全部组件的排列方向，可选值有两个：row和column，分别表示水平方向排列和竖直方向排列。当flex-direction的值设置为row时，水平方向为主轴，竖直方向为副轴；当flex-direction的值设置为column时，竖直方向为主轴，水平方向为副轴。

 ● 样式justify-content用于指定容器内全部组件在主轴上的对齐方式，可选值有五个：flex-start、flex-end、center、space-between和space-around。

 ● 样式align-items用于指定容器内全部组件在副轴上的对齐方式，可选值有三个：flex-start、flex-end和center。

    组合使用以上三个样式，能够指定容器内全部组件的布局。接下来，咱们经过多组示例来演示以上三个样式的组合用法。

    新建一个Lite Wearable的项目。
    打开文件index.hml。
    在最外层的组件div中嵌套四个组件div，将属性class的值分别设置为subcontainer一、subcontainer二、subcontainer三、subcontainer4。

    代码以下所示：

<div class="container">
    <div class="subcontainer1">
    </div>

    <div class="subcontainer2">
    </div>

    <div class="subcontainer3">
    </div>

    <div class="subcontainer4">
    </div>
</div>

    打开文件index.css。
    添加四个类选择器，以设置4个内嵌组件div的样式。
    将第1个内嵌组件div的宽度width和高度height都设置为40px，并将其背景色设置为蓝色。
    将第2个内嵌组件div的宽度width和高度height都设置为60px，并将其背景色设置为绿色。
    将第3个内嵌组件div的宽度width和高度height都设置为80px，并将其背景色设置为红色。
    将第4个内嵌组件div的宽度width和高度height都设置为100px，并将其背景色设置为黄色。
    为了设置4个内嵌组件div的布局，在类选择器container中将flex-direction的值设置为row，以指定水平方向为主轴，从而指定容器内全部组件的排列方向为水平方向。将justify-content的值设置为flex-start，以指定容器内全部组件在主轴上的对齐方式。将align-items的值设置为center，以指定容器内全部组件在副轴上的对齐方式。

    代码以下所示：

.container {
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: 454px;
	height: 454px;
}
.subcontainer1 {
	width: 40px;
	height: 40px;
	background-color: blue;
}
.subcontainer2 {
	width: 60px;
	height: 60px;
	background-color: green;
}
.subcontainer3 {
	width: 80px;
	height: 80px;
	background-color: red;
}
.subcontainer4 {
	width: 100px;
	height: 100px;
	background-color: yellow;
}

    保存全部代码后打开模拟器，4个内嵌组件div的排列方向为水平方向。在主轴（水平方向）上的对齐方式为左对齐。在副轴（竖直方向）上的对齐方式为居中对齐。运行效果以下图所示：

    将index.css中主轴上的对齐方式修改成flex-end，代码以下所示：

.container {
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	width: 454px;
	height: 454px;
}

    保存全部代码后打开模拟器，4个内嵌组件div在主轴上的对齐方式为右对齐。运行效果以下图所示：

    将index.css中主轴上的对齐方式修改成center，代码以下所示：

.container {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 454px;
	height: 454px;
}

    保存全部代码后打开模拟器，4个内嵌组件div在主轴上的对齐方式为居中对齐。运行效果以下图所示：

    将index.css中主轴上的对齐方式修改成space-between，代码以下所示：

文章后续内容和相关附件能够点击下面的原文连接前往学习
原文连接：https://harmonyos.51cto.com/posts/2266#bkwz

想了解更多关于鸿蒙的内容，请访问：

51CTO和华为官方战略合做共建的鸿蒙技术社区

https://harmonyos.51cto.com/#bkwz