一、Flex弹性布局

Flex布局是CSS布局的一种新方式，它可以简化布局过程，让开发者更容易地创建灵活的布局。Flex布局提供了一种灵活的方式来对容器内的项进行排列、对齐和分配空间，它在鸿蒙中同样适用。

1.1 主轴方向

1.1.1 FlexDirection.Row

主轴为水平方向，子组件从起始端沿着水平方向开始排布

1.1.2 FlexDirection.RowReverse

主轴为水平方向，子组件从终点端沿着FlexDirection. Row相反的方向开始排布。

1.1.3 FlexDirection.Column

主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。

1.1.4 FlexDirection.ColumnReverse

主轴为垂直方向，子组件从终点端沿着FlexDirection. Column相反的方向开始排布。

1.2 布局换行

1.2.1 FlexWrap. NoWrap

默认值不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度

1.2.2 FlexWrap. Wrap

换行，每一行子组件按照主轴方向排列

1.2.3 FlexWrap. WrapReverse

换行，每一行子组件按照主轴反方向排列。

1.3 主轴对齐

1.3.1 FlexAlign.Start

默认值,子组件在主轴方向起始端对齐， 第一个子组件与父元素边沿对齐，其他元素与前一个元素对齐。

1.3.2 FlexAlign.Center

子组件在主轴方向居中对齐

1.3.3 FlexAlign.End

子组件在主轴方向终点端对齐, 最后一个子组件与父元素边沿对齐，其他元素与后一个元素对齐。

1.3.4 FlexAlign.SpaceBetween

Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐。

1.3.5 FlexAlign.SpaceAround

Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件到主轴起始端的距离和最后一个子组件到主轴终点端的距离是相邻元素之间距离的一半。

1.3.6 FlexAlign.SpaceEvenly

Flex主轴方向元素等间距布局，相邻子组件之间的间距、第一个子组件与主轴起始端的间距、最后一个子组件到主轴终点端的间距均相等。

1.4 交叉轴对齐

1.4.1 容器组件设置交叉轴对齐

1.4.1.1 ItemAlign.Auto

使用Flex容器中默认配置

1.4.1.2 ItemAlign.Start

交叉轴方向首部对齐。

1.4.1.3 ItemAlign.Center

交叉轴方向居中对齐。

1.4.1.4 ItemAlign.End

交叉轴方向底部对齐。

1.4.1.5 ItemAlign.Stretch

交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

1.4.1.6 ItemAlign. Baseline

交叉轴方向文本基线对齐。

1.4.2 子组件设置交叉轴对齐

子组件的alignSelf属性也可以设置子组件在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置

1.5 自适应拉伸

1.5.1 flexBasis

设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置该属性，那子项的空间为width/height的值

1.5.2 flexGrow

设置父容器的剩余空间分配给此属性所在组件的比例。用于“瓜分”父组件的剩余空间。

1.5.3 flexShrink

当父容器空间不足时，子组件的压缩比例

二、栅格布局

栅格布局（Grid Layout）是一种在现代前端开发中广泛使用的布局技术，它允许开发者以二维（行和列）的方式精确地控制网页元素的布局。与传统的流式布局（如float和position）相比，栅格布局提供了更高级的布局控制能力，尤其是在响应式设计和复杂界面布局方面。

2.1 栅格系统断点

栅格系统中的“断点”（Breakpoints）是响应式设计的核心概念之一，主要用于定义在不同屏幕尺寸下，网页布局应如何变化。断点是预设的屏幕宽度阈值，当视口尺寸达到这些阈值时，样式规则会发生变化，从而调整布局以适应不同的设备和屏幕尺寸。

• 栅格系统默认断点将设备宽度分为xs、sm、md、lg四类
• 在GridRow栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl，xxl两个断点，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）

2.1.1 启用xs、sm、md

breakpoints: {value: ['100vp', '200vp']}

共3个断点，小于100vp为xs，100vp-200vp为sm，大于200vp为md

2.1.2 启用xs, sm, md, lg, xl, xxl

@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
GridRow({
  breakpoints: {
    value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
    reference: BreakpointsReference.WindowSize
  }
}) {
   ForEach(this.bgColors, (color, index) => {
     GridCol({
       span: {
         xs: 2, // 在最小宽度类型设备上，栅格子组件占2列。
         sm: 3, // 在小宽度类型设备上，栅格子组件占据3列。
         md: 4, // 在中等宽度类型设备上，栅格子组件占4列。
         lg: 6, // 在大宽度类型设备上，栅格子组件占6列。
         xl: 8, // 在特大宽度类型设备上，栅格子组件占8列。
         xxl: 12 // 在超大宽度类型设备上，栅格子组件占12列。
       }
     }) {
       Row() {
         Text(`${index}`)
       }.width("100%").height('50vp')
     }.backgroundColor(color)
   })
} 

2.2 布局

2.2.1 排列

栅格布局中，可以通过设置GridRow的direction属性来指定栅格子组件在栅格容器中的排列方向。该属性可以设置为GridRowDirection.Row（从左往右排列）或GridRowDirection.RowReverse（从右往左排列）

GridRow({ direction: GridRowDirection.Row }){}

2.2.2 间距

子组件间距 GridRow中通过gutter属性设置子元素在水平和垂直方向的间距

GridRow({ gutter: 10 }){}

2.2.3 子组件GridCol

GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设置属性两种方式，设置span（占用列数），offset（偏移列数），order（元素序号）的值

span:子组件占栅格布局的列数，决定了子组件的宽度，默认为1

GridCol({ span: 2 }){}

2.2.4 偏移

offset: 栅格子组件相对于前一个子组件的偏移列数，默认为0。

GridCol({ offset: 2 }){}

2.2.5 排序

在栅格系统中，order属性通常用于控制元素在容器中的显示顺序。它决定子组件排列次序，当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示；当子组件设置不同的order时，order较小的组件在前，较大的在后。