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

Flex布局的相关概念

Flex布局的相关概念Flex（弹性）布局提供更加有效的方法对容器中的子元素进行排列、对齐和剩余空间分配，常用于页面导航栏的均匀分布、页面框架的搭建、多行数据的排列等。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向上的尺寸称为主轴尺寸，在交叉轴方向上的尺寸称为交叉轴尺寸。子元素在Flex容器中的排列方式如图所示。任务导入知识解析学以致用课堂小结课后拓展1.1Flex布局

主轴和交叉轴（1）主轴：Flex容器布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束的位置称为主轴结束点。（2）交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束的位置称为交叉轴结束点。任务导入知识解析学以致用课堂小结课后拓展1.1Flex布局

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

布局方向的控制子元素的排列方向如下：FlexDirection.Row（默认值）：主轴为水平方向，子元素从起始端沿着水平方向开始排列。FlexDirection.RowReverse：主轴为水