【鸿蒙图解】多组实例演示三种样式的组合使用在使用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。结合以上三种样式，就可以指定容器中所有组件的布局。下面我们通过多组实例来演示以上三种风格的组合使用。创建一个新的LiteWearable项目。打开文件index.hml。在最外层的组件div中嵌套四个组件div，属性class的值分别设置为subcontainer1、subcontainer2、subcontainer3、subcontainer4。代码如下所示：
