鸿蒙移动应用开发项目式教程课件 项目2-数字云图书馆展示页-任务2-3 Flex布局的相关概念

Flex布局的相关概念Flex布局的相关概念Flex（弹性）布局提供更加有效的方法对容器中的子元素进行排列、对齐和剩余空间分配，常用于页面导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向上的尺寸称为主轴尺寸，在交叉轴方向上的尺寸称为交叉轴尺寸。子元素在Flex容器中的排列方式如图所示。任务导入知识解析学以致用课堂小结课后拓展1.1Flex布局

主轴和交叉轴

（1）主轴：Flex容器布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束的位置称为主轴结束点。

（2）交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束的位置称为交叉轴结束点。任务导入知识解析学以致用课堂小结课后拓展1.1Flex布局

布局方向的控制

在Flex布局中，容器的子元素可以按照任意方向排列。通过设置direction参数，可以决定主轴的布局方向，从而控制子元素的排列方向，如图所示。任务导入知识解析学以致用课堂小结课后拓展1.2Flex布局方向

布局方向的控制子元素的排列方向如下：FlexDirection.Row（默认值）：主轴为水平方向，子元素从起始端沿着水平方向开始排列。FlexDirection.RowReverse：主轴为水平方向，子元素从结束端沿着与FlexDirection.Row相反的方向开始排列。FlexDirection.Column：主轴为垂直方向，子元素从起始端沿着垂直方向开始排列。FlexDirection.ColumnReverse：主轴为垂直方向，子元素从结束端沿着与FlexDirection.Column相反的方向开始排列。任务导入知识解析学以致用课堂小结课后拓展1.2Flex布局方向

布局换行Flex布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。由wrap属性决定当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局中，可以通过交叉轴方向来确定新行的排列方向。wrap属性可设置的换行方式如下。FlexWrap.NoWrap（默认值）：不换行。如果子元素的宽度总和大于父元素的宽度，则子元素宽度会被压缩。FlexWrap.Wrap：换行，每一行子元素按照主轴方向排列。FlexWrap.WrapReverse：换行，每一行子元素按照主轴反方向排列。任务导入知识解析学以致用课堂小结课后拓展1.3Flex布局换行

主轴方向的对齐方式justifyContent属性用于设置子元素在主轴方向的对齐方式，如图所示。任务导入知识解析学以致用课堂小结课后拓展1.3Flex布局对齐方式

主轴方向的对齐方式justifyContent属性可设置子元素在主轴方向的6种对齐方式，具体如下。FlexAlign.Start（默认值）：子元素在主轴方向起始端对齐，第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。FlexAlign.Center：子元素在主轴方向居中对齐。FlexAlign.End：子元素在主轴方向结束端对齐，最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。FlexAlign.SpaceBetween：沿主轴方向均匀分配弹性元素，相邻子元素之间距离相等，第一个子元素和最后一个子元素与父元素边沿对齐。FlexAlign.SpaceAround：沿主轴方向均匀分配弹性元素，相邻子元素之间距离相等，第一个子元素到主轴起始端的距离和最后一个子元素到主轴结束端的距离是相邻子元素之间距离的一半。FlexAlign.SpaceEvenly：沿主轴方向元素等间距布局，相邻子元素的间距、第一个子元素到主轴起始端的间距、最后一个子元素到主轴结束端的间距均相等。任务导入知识解析学以致用课堂小结课后拓展1.3Flex布局对齐方式

交叉轴方向的对齐方式

容器和子元素都可以设置交叉轴方向的对齐方式，且子元素设置的对齐方式优先级更高。可以通过Flex容器的alignItems属性设置子元素在交叉轴方向的对齐方式。子元素在交叉轴方向的6种对齐方式如下。ItemAlign.Auto：使用Flex容器中的默认配置。ItemAlign.Start：沿交叉轴方向顶部对齐。ItemAlign.Center：沿交叉轴方向居中对齐。ItemAlign.End：沿交叉轴方向底部对齐。ItemAlign.Stretch