目录：
当我们使用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