【HarmonyOS应用开发】多组示例演示三个样式的组合用法
当我们使用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;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，代码如下所示：
.container {flex-direction: row;justify-content: space-between;align-items: center;width: 454px;height: 454px;}保存所有代码后打开模拟器，4个内嵌组件div在主轴上的对齐方式为两端对齐。运行效果如下图所示：
将index.css中主轴上的对齐方式修改为space-around，代码如下所示：
.container {flex-direction: row;justify-content: space-around;align-items: center;width: 454px;height: 454px;}保存所有代码后打开模拟器，4个内嵌组件div在主轴上的对齐方式为分散对齐。运行效果如下图所示：
将index.css中副轴上的对齐方式修改为flex-start，代码如下所示：
.container {flex-direction: row;justify-content: space-around;align-items: flex-start;width: 454px;height: 454px;}保存所有代码后打开模拟器，4个内嵌组件div在副轴上的对齐方式为上对齐。运行效果如下图所示：
将index.css中副轴上的对齐方式修改为flex-end，代码如下所示：
.container {flex-direction: row;justify-content: space-around;align-items: flex-end;width: 454px;height: 454px;}保存所有代码后打开模拟器，4个内嵌组件div在副轴上的对齐方式为下对齐。运行效果如下图所示：
将index.css中flex-direction的值设置为column，以指定竖直方向为主轴，从而指定容器内所有组件的排列方向为竖直方向，代码如下所示：
.container {flex-direction: column;justify-content: space-around;align-items: flex-end;width: 454px;height: 454px;}保存所有代码后打开模拟器，4个内嵌组件div在主轴（竖直方向）上的对齐方式为分散对齐，并且在副轴（水平方向）上的对齐方式为右对齐。运行效果如下图所示：
通过以上多组示例的演示，相信大家已经掌握了flex-direction、justify-content和align-items这三个样式的组合用法，从而可以轻松地指定容器内所有组件的布局了。