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

发布于 2020-12-26 17:54
浏览
123收藏

    当我们使用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的排列方向为水平方向。在主轴(水平方向)上的对齐方式为左对齐。在副轴(竖直方向)上的对齐方式为居中对齐。运行效果如下图所示:

#2020征文-手表#【图解鸿蒙】多组示例演示三个样式的组合用法-开源基础软件社区

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

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

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

#2020征文-手表#【图解鸿蒙】多组示例演示三个样式的组合用法-开源基础软件社区    将index.css中主轴上的对齐方式修改为center,代码如下所示:

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

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

#2020征文-手表#【图解鸿蒙】多组示例演示三个样式的组合用法-开源基础软件社区    将index.css中主轴上的对齐方式修改为space-between,代码如下所示:

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

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

#2020征文-手表#【图解鸿蒙】多组示例演示三个样式的组合用法-开源基础软件社区    将index.css中主轴上的对齐方式修改为space-around,代码如下所示:

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

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

#2020征文-手表#【图解鸿蒙】多组示例演示三个样式的组合用法-开源基础软件社区    将index.css中副轴上的对齐方式修改为flex-start,代码如下所示:

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

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

#2020征文-手表#【图解鸿蒙】多组示例演示三个样式的组合用法-开源基础软件社区    将index.css中副轴上的对齐方式修改为flex-end,代码如下所示:

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

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

#2020征文-手表#【图解鸿蒙】多组示例演示三个样式的组合用法-开源基础软件社区    将index.css中flex-direction的值设置为column,以指定竖直方向为主轴,从而指定容器内所有组件的排列方向为竖直方向,代码如下所示:

.container {
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-end;
	width: 454px;
	height: 454px;
}

    保存所有代码后打开模拟器,4个内嵌组件div在主轴(竖直方向)上的对齐方式为分散对齐,并且在副轴(水平方向)上的对齐方式为右对齐。运行效果如下图所示:

#2020征文-手表#【图解鸿蒙】多组示例演示三个样式的组合用法-开源基础软件社区    通过以上多组示例的演示,相信大家已经掌握了flex-direction、justify-content和align-items这三个样式的组合用法,从而可以轻松地指定容器内所有组件的布局了。

 

项目源代码,请见附件。

 

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

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

 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
项目源代码.zip 146.31K 622次下载
已于2020-12-26 17:54:24修改
140
收藏 123
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐