布局分类
鸿蒙中布局分类可以归纳为响应式和自适应式。
响应式布局
定义：元素可以根据断点、栅格或特定的特征（如屏幕方向、窗口宽高等）自动变化以适应外部容器变化的布局能力。
目的：通过条件触发，主要是解决页面整体差异。
分类：缩进布局、挪移布局、重复布局、分栏布局。
原理：基于 断点、媒体查询、栅格布局等能力实现。
断点
将窗口宽度划分为不同的范围（即断点），监听窗口尺寸变化，当断点改变时同步调整页面布局。
栅格布局
栅格组件将其所在的区域划分为有规律的多列，通过调整不同断点下的栅格组件的参数以及其子组件占据的列数等，实现不同的布局效果。
栅格组件的断点，栅格组件默认提供xs、sm、md、lg四个断点。除了默认的四个断点，还支持开发者启用xl和xxl两个额外的断点。
栅格组件的columns、gutter和margin，Gutter是相邻的两个Column之间的距离，决定内容间的紧密程度。 Columns是栅格中的列数，其数值决定了内容的布局复杂度。
栅格组件的span、offset和order
媒体查询
媒体查询支持监听窗口宽度、横竖屏、深浅色、设备类型等多种媒体特征，当媒体特征发生改变时同步调整页面布局。
针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。
当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面布局。
自适应布局
定义：元素可以根据相对关系自动变化以适应外部容器变化的布局能力。
目的：通过连续变化，解决页面各区域的布局差异。
分类：拉伸能力、均分能力、占比能力、缩放能力、延伸能力、隐藏能力、折行能力 7种布局能力
原理：基于Row、Column组件或者Flex、List、Scroll等组件实现。
延伸能力
延伸能力有2种方式，方式一：将父容器的剩余空间全部分配给某空白区域时，也可以通过Blank组件实现。注意仅当父组件为Row\Column\Flex组件时，Blank组件才会生效。
方式二：通常通过Flex布局中的flexGrow和flexShrink属性实现，flexGrow和flexShrink属性常与flexBasis属性搭配使用。
均分能力
均分能力通过将Row组件、Column组件或Flex组件的justifyContent属性设置为FlexAlign.SpaceEvenly实现，即子元素在父容器主轴方向等间距布局，相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
占比能力
占比能力是指子组件的宽高按照预设的比例，随父容器组件发生变化。通过layoutWeight属性配置。
缩放能力
缩放能力通过使用百分比布局配合固定宽高比（aspectRatio属性）实现当容器尺寸发生变化时，内容自适应调整。
延伸能力
延伸能力通过List组件实现或者Scroll组件配合Row组件或Column组件实现。
隐藏能力
隐藏能力通过设置布局优先级（displayPriority属性）来控制显隐。
折行能力
折行能力通过使用 Flex折行布局 （将wrap属性设置为FlexWrap.Wrap）实现，当横向布局尺寸不足以完整显示内容元素时，通过折行的方式，将元素显示在下方。
典型应用场景
以下是总结的应用中的典型布局场景。具体实现可以查看官方文档。
