鸿蒙的布局以及绝对定位和层级

弹性布局（Flex）

语法：

Flex(参数对象){
  子组件1
  子组件2
  子组件3
  子组件N
}

Flex默认主轴水平往右，交叉轴垂直往下 → 右

1.主轴方向：direction

direction: FlexDirection.Row / Column

2.主轴对齐方式：justifyContent

justifyContent: FlexAlign.SpaceAround

3.交叉轴对齐方式：alignltems

alignItems: ItemAlign.Streatch / Star / Center / End

单行或者单列的情况，优先还是使用线性布局（本质基于Flex设计的，且还做了性能优化） 

Flex布局：伸缩布局。当子盒子的总和溢出父盒子，默认进行压缩显示。

4.布局换行：wrap

wrap 属性：Flex 是单行布局还是多行布局

1. FlexWrap.NoWrap        单行布局

2. FlexWrap.Wrap             多行布局

3.FlexWrap.NoWrap          不换行

Flex({
  wrap: FlexWrap.Wrap
})

绝对定位 - position

作用：控制组件位置，可以实现层叠效果

特点：

1.参照 父组件左上角 进行偏移

2.绝对定位后的组件 不在占用自身原有位置

语法：.position(位置对象)

参数：{ x：水平偏移量，y：垂直偏移量 }

zIndex 层级

作用：调整组件层级

语法：.zIndex(数字)

参数：取值为整数数字，取值越大，显示层级越高

层叠布局

层叠布局具有较强的组件层叠能力。场景：卡片层叠效果等

特点：层叠操作更简洁，编码效率高。（绝对定位的优势是更灵活）

Stack 容器内的字元素的顺序为 Iteam1 → Item2 → Item3

语法：

Stack({
  alignContent: Alignment.Center
}) {
  Item1()
  Item2()
  Item3()
}