19.图解鸿蒙之线性布局-Row容器内子元素在水平方向上的排列

图解鸿蒙之线性布局 - Row 容器内子元素在水平方向上的排列

Row 容器内子元素在水平方向上的排列图

1. 从左对齐(justifyContent (FlexAlign.Start):子元素从 Row 容器的最左边(行首)开始依次排列,第一个元素与容器左边沿对齐,元素之间紧密相连,没有额外的间隔。就像在跑道上,运动员从起跑线开始,一个挨着一个。

2. 中心对齐(justifyContent (FlexAlign.Center):子元素以 Row 容器的水平中心为基准对齐,所有子元素的中心位置在同一条水平线上。如同用一条中心线把元素串起来,它们围绕中心分布。

3. 从右对齐(justifyContent (FlexAlign.End):子元素从 Row 容器的最右边(行尾)开始依次向左排列,最后一个元素与容器右边沿对齐。类似于从终点线开始反向排队。

4\. 均匀间隔对齐(justifyContent (FlexAlign.SpaceBetween):子元素在水平方向均匀分布,相邻元素间隔相同,且第一个元素与容器左边对齐,最后一个元素与容器右边对齐。像在一根横杆上均匀挂着物体,两端都有物体紧贴横杆两端。

5\. 环绕间隔对齐(justifyContent (FlexAlign.SpaceAround):子元素均匀分布,相邻元素间隔相同,且第一个元素到容器左边和最后一个元素到容器右边的距离是相邻元素间隔的一半。元素好像被一种力环绕在容器中间,四周有间隔。

6. 等距间隔对齐(justifyContent (FlexAlign.SpaceEvenly):子元素在水平方向均匀分配,相邻元素间隔、第一个元素与容器左边间隔和最后一个元素与容器右边间隔完全相同。排列非常规整,像用尺子量好后摆放的。

PS:实际项目中如有出入,请告知博主,博主会第一时间修改得哇 \~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值