基础概念

属性方法名说明参数
justifyContent设置子元素在<font color="#4ebdf3">主轴</font>方向的对齐方式FlexAlign 枚举
alignItems设置子元素在<font color="#4ebdf3">交叉轴</font>方向的对齐格式Row 容器使用 VerticalAlign 枚举
Column 容器使用 HorizontatAlign 枚举

什么是主轴?什么是交叉轴?

  • 主轴:线性布局容器在布局方向上的轴线,子元素默认沿主轴排列。Row 容器主轴为横向,Column 容器主轴为纵向
  • 交叉轴:垂直于主轴方向的轴线。Row 容器交叉轴为纵向,Column 容器交叉轴为横向

如图:您可以直观看到排列方向
image.png

在主轴上

通过 FlexAlign 的枚举值改变对齐方式

  • FlexAlign.Start(默认值):子组件在主轴方向起始端对齐, 第一个子组件与父元素边沿对齐,其他元素与前一个元素对齐。
  • FlexAlign.Center:子组件在主轴方向居中对齐。
  • FlexAlign.End:子组件在主轴方向终点端对齐, 最后一个子组件与父元素边沿对齐,其他元素与后一个元素对齐。
  • FlexAlign.SpaceBetween:Flex 主轴方向均匀分配弹性元素,相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐。
  • FlexAlign.SpaceAround:Flex 主轴方向均匀分配弹性元素,相邻子组件之间距离相同。第一个子组件到主轴起始端的距离和最后一个子组件到主轴终点端的距离是相邻元素之间距离的一半。
  • FlexAlign.SpaceEvenly:Flex 主轴方向元素等间距布局,相邻子组件之间的间距、第一个子组件与主轴起始端的间距、最后一个子组件到主轴终点端的间距均相等。

column 容器

FlexAlign.start

image.png

FlexAlign.Center

image.png

FlexAlign.End

image.png

FlexAlign.SpaceBetween

image.png

FlexAlign.SpaceAround

image.png

FlexAlign.SpaceEvenly

image.png

row 容器

FlexAlign.start

image.png

FlexAlign.Center

image.png

FlexAlign.End

image.png

FlexAlign.SpaceBetween

image.png

FlexAlign.SpaceAround

image.png

FlexAlign.SpaceEvenly

image.png

在交叉轴上

在交叉轴中视容器而使用不同的枚举

column 容器

在 column 容器中使用 HorizontalAlign 枚举来确定在交叉轴的对齐方式
image.png

row 容器

在 row 容器中使用 VerticalAlign 枚举来确定在交叉轴的对齐方式

image.png


LuoMingxiang
1 声望0 粉丝