ArkUI中常用布局容器

線性布局（Row/Column）

1. 線性布局的子元素在線性方向上（水平方向和垂直方向）依次排列
2. 線性布局容器包括[Row]和[Column]。Column容器內子元素按照垂直方向排列，Row容器內子元素按照水平方向排列
3. 開發前請熟悉鴻蒙開發指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

主軸

1. 線性布局容器在布局方向上的軸線，子元素默認沿主軸排列。
2. Row容器主軸為橫向，Column容器主軸為縱向。通過justifyContent屬性設置子元素在容器主軸上的排列方式
3. 默認相鄰子元素是緊貼著的，也可以通過space設置子元素間的間距

Column容器內子元素在主軸上的排列

主軸方向：垂直向下

typescript
復制代碼
Column() {
...
}.justifyContent(FlexAlign.Start)

1. justifyContent(FlexAlign.Start)：元素在主軸方向首端對齊，第一個元素與行首對齊，同時后續的元素與前一個對齊
2. justifyContent(FlexAlign.Center)：元素在主軸方向中心對齊，第一個元素與行首的距離與最后一個元素與行尾距離相同
3. justifyContent(FlexAlign.End)：元素在主軸方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊
4. justifyContent(FlexAlign.Spacebetween)：主軸方向均勻分配元素，相鄰元素之間距離相同。第一個元素與行首對齊，最后一個元素與行尾對齊
5. justifyContent(FlexAlign.SpaceAround)：主軸方向均勻分配元素，相鄰元素之間距離相同。第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半
6. justifyContent(FlexAlign.SpaceEvenly)：主軸方向均勻分配元素，相鄰元素之間的距離、第一個元素與行首的間距、最后一個元素到行尾的間距都完全一樣

Row容器內子元素在主軸上的排列

主軸方向：水平向右

typescript
復制代碼
Row() {
...
}.justifyContent(FlexAlign.Start)

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

1. justifyContent(FlexAlign.Start)：元素在主軸方向首端對齊，第一個元素與行首對齊，同時后續的元素與前一個對齊
2. justifyContent(FlexAlign.Center)：元素在主軸方向中心對齊，第一個元素與行首的距離與最后一個元素與行尾距離相同
3. justifyContent(FlexAlign.End)：元素在主軸方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊
4. justifyContent(FlexAlign.Spacebetween)：主軸方向均勻分配元素，相鄰元素之間距離相同。第一個元素與行首對齊，最后一個元素與行尾對齊
5. justifyContent(FlexAlign.SpaceAround)：主軸方向均勻分配元素，相鄰元素之間距離相同。第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半
6. justifyContent(FlexAlign.SpaceEvenly)：主軸方向均勻分配元素，相鄰元素之間的距離、第一個元素與行首的間距、最后一個元素到行尾的間距都完全一樣

審核編輯 黃宇