#2020征文手表#【图解鸿蒙】多组示例演示三个样式的组合用法

目录：

正文

源码包

当我们使用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的值分别设置为subcontainer1、subcontainer2、subcontainer3、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;
	 454px;
	height: 454px;
}
.subcontainer1 {
	 40px;
	height: 40px;
	background-color: blue;
}
.subcontainer2 {
	 60px;
	height: 60px;
	background-color: green;
}
.subcontainer3 {
	 80px;
	height: 80px;
	background-color: red;
}
.subcontainer4 {
	 100px;
	height: 100px;
	background-color: yellow;
}

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

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

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

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

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

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

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

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

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

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

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

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

查看更多章节>>>

作者：张荣超

想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com