6.图解鸿蒙之布局-justifyContent

在鸿蒙的弹性布局魔法世界里，justifyContent 参数就像是一位神奇的 "排列指挥官"，专门负责把子元素在主轴方向上安排得整整齐齐。它有好多奇妙的 "指挥策略"，能让同样的几个组件，呈现出截然不同的排列效果哦。

1. FlexAlign.Start（默认值）：乖乖站在起始端

这是最 "老实" 的一种对齐方式啦。子元素们就像听话的小士兵，在主轴方向上，统统朝着起始端看齐。打头阵的第一个子元素，紧紧挨着父元素的边沿，后面的小伙伴呢，依次跟上，跟前一个元素对齐。就看下面这段代码：

这三个彩色背景的 Text 元素，都老老实实地从父容器的起始边开始排列，规规矩矩，一点也不调皮。

1. FlexAlign.Center：站到正

要是把 justifyContent 设成 FlexAlign.Center ，子元素们瞬间变得 "爱出风头" 啦，它们不再靠着边儿，而是一股脑儿往主轴方向的正中间挤，要在最显眼的地方站定。代码里是这样呈现的：

 你瞧，这三个 Text 元素不再偏居一隅，而是在容器中间排排站，特别醒目。

1. FlexAlign.End：朝着终点看齐

这种对齐方式呢，子元素们反着来，都往主轴方向的终点端奔去。最后一个子元素紧紧贴住父元素的边沿，其他元素依次往后靠，跟后一个元素对齐。来看看代码示例：

这里的 Text 元素都朝着容器末尾排列，整整齐齐。

1. FlexAlign.SpaceBetween：均匀拉开距离，靠边站

这个就有趣啦，FlexAlign.SpaceBetween 一上场，子元素们就在主轴方向上均匀分布，彼此之间留出一样宽的距离。而且呀，第一个和最后一个子元素还特别守纪律，紧紧挨着父元素的边沿。代码如下：

 三个 Text 元素把空间分得明明白白，看着清爽又利落。

1. FlexAlign.SpaceAround：间距有讲究，四周都均匀

当 justifyContent 是 FlexAlign.SpaceAround 时，子元素依旧均匀分布，相邻元素间距相同。不过呢，第一个子元素到主轴起始端的距离，还有最后一个子元素到主轴终点端的距离，是相邻元素之间距离的一半，整体布局更显和谐。

1. FlexAlign.SpaceEvenly：绝对等间距

最后这个 FlexAlign.SpaceEvenly 更绝啦，不管是相邻子元素之间，还是第一个子元素与主轴起始端、最后一个子元素与主轴终点端，间距通通相等，把均匀做到了极致。

有了这么多好玩的主轴对齐方式，咱们在鸿蒙里打造弹性布局时，就能轻松拿捏各种精致又实用的页面效果啦。

PS：实际项目中如有出入，请告知博主，博主会第一时间修改得哇～