【图解鸿蒙】多组示例演示三个样式的组合用法-鸿蒙自定义组合组件

当我们使用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> 
</d

打开文件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这三个样式的组合用法，从而可以轻松地指定容器内所有组件的布局了。

项目源代码，请见附件。

欢迎订阅我的专栏【图解鸿蒙】：

https://harmonyos.51cto.com/column/27

想了解更多内容，请访问：

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

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