上一节我们实现了仿微信聊天页面的软键盘避让方式，那么聊天时候的对方消息和我方消息有着不同的对齐方式，对方消息靠左靠上对齐，而我方消息靠右靠下对齐，如下图所示。

对于组件内外的对齐规则，鸿蒙App与安卓App拥有不同的处理方式。安卓App通过layout_gravity属性控制自身相对上级容器的对齐方式，通过gravity属性控制下级组件相对自身的对齐方式。而对鸿蒙App而言，情况又有所不同，下面将一一阐述鸿蒙App对于各种场景的对齐规则。

一、当前组件相对于上级容器的对齐方式

鸿蒙App通过alignSelf方法设置当前组件在上级容器交叉轴的对齐格式，所谓交叉轴指的是与主轴呈90度或者270度夹角的方向。如果上级容器的主轴为水平方向，则交叉轴为垂直方向；如果上级容器的主轴为垂直方向，则交叉轴为水平方向。
与上级容器交叉轴的对齐格式可通过alignSelf方法的参数指定，取值为为ItemAlign.Start时，表示朝起始位置对齐；取值为ItemAlign.Center时，表示居中对齐；取值为ItemAlign.End时，表示朝终止位置对齐。
举个例子，当上级容器为Column时，由于Column的主轴为垂直方向，因此alignSelf方法设置当前组件在水平方向上对齐；当上级容器为Row时，由于Row的主轴为水平方向，因此alignSelf方法设置当前组件在垂直方向上对齐。
注意：alignSelf方法可应用于Flex、Column、Row、GridRow等布局容器。

二、当前容器指定下级组件的对齐方式

下级组件的对齐方式有两种，分别是水平方向和垂直方向。鸿蒙App通过justifyContent方法设置下级组件在容器主轴上的对齐方式，通过alignItems方法设置下级组件在容器交叉轴上的对齐方式。
就justifyContent方法而言，参数取值为FlexAlign.Start时，表示朝起始位置对齐；取值为FlexAlign.Center时，表示居中对齐；取值为FlexAlign.End时，表示朝终止位置对齐。如果当前容器是Column，则justifyContent方法指定下级组件在垂直方向上对齐；如果当前容器是Row，则justifyContent方法指定下级组件在水平方向上对齐。
就alignItems方法而言，如果当前容器是Column，则参数取值为HorizontalAlign.Start时，表示下级组件朝水平方向的起始位置也就是左边对齐；取值为HorizontalAlign.Center时，表示下级组件水平居中对齐；取值为HorizontalAlign.End时，表示下级组件朝水平方向的终止位置也就是右边对齐。如果当前容器是Row，则参数取值为VerticalAlign.Start时，表示下级组件朝垂直方向的起始位置也就是顶端对齐；取值为VerticalAlign.Center时，表示下级组件垂直居中对齐；取值为VerticalAlign.End时，表示下级组件朝垂直方向的终止位置也就是底端对齐。

三、Text组件指定内部文本的对齐方式

Text组件内部文本的对齐方式也有两种，分别是水平方向和垂直方向。鸿蒙App通过textAlign方法设置内部文本在Text组件水平方向上的对齐方式，通过align方法设置内部文本在Text组件垂直方向上的对齐方式。
就textAlign方法而言，参数取值为TextAlign.Start时，表示内部文本朝水平方向的起始位置也就是左边对齐；取值为TextAlign.Center时，表示内部文本水平居中对齐；取值为TextAlign.End时，表示内部文本朝水平方向的终止位置也就是右边对齐。
就align方法而言，参数取值为Alignment.Top时，表示内部文本朝垂直方向的起始位置也就是顶端对齐；取值为Alignment.Center时，表示内部文本垂直居中对齐；取值为Alignment.Bottom时，表示内部文本朝垂直方向的终止位置也就是底端对齐。
回到一开始的聊天消息截图，整体消息在垂直方向排列，但就单条消息而言，这是在水平方向排列。比如对方消息为左边图标，右边消息内容，然后朝左朝上对齐；而我方消息为左边消息内容，右边图标，然后朝右朝上对齐。
那么朝左朝上对齐的对方消息，可使用下面的对齐代码：

.alignItems(VerticalAlign.Top).justifyContent(FlexAlign.Start)

至于朝右朝上对齐的我方消息，可使用下面的对齐代码：

.alignItems(VerticalAlign.Top).justifyContent(FlexAlign.End)

采用上述对齐代码实现的聊天消息界面，就能实现对方消息朝左朝上对齐、我方消息朝右朝上对齐的效果了。

下一篇文章会介绍如何实现微信聊天界面的文本背景气泡效果。