基础概念
属性方法名 | 说明 | 参数 |
---|---|---|
justifyContent | 设置子元素在主轴方向的对齐方式 | FlexAlign 枚举 |
alignItems | 设置子元素在交叉轴方向的对齐格式 | Row 容器使用 VerticalAlign 枚举 Column 容器使用 HorizontatAlign 枚举 |
什么是主轴?什么是交叉轴?
- 主轴:线性布局容器在布局方向上的轴线,子元素默认沿主轴排列。Row 容器主轴为横向,Column 容器主轴为纵向
- 交叉轴:垂直于主轴方向的轴线。Row 容器交叉轴为纵向,Column 容器交叉轴为横向
如图:您可以直观看到排列方向
在主轴上
通过 FlexAlign 的枚举值改变对齐方式
- FlexAlign.Start(默认值):子组件在主轴方向起始端对齐, 第一个子组件与父元素边沿对齐,其他元素与前一个元素对齐。
- FlexAlign.Center:子组件在主轴方向居中对齐。
- FlexAlign.End:子组件在主轴方向终点端对齐, 最后一个子组件与父元素边沿对齐,其他元素与后一个元素对齐。
- FlexAlign.SpaceBetween:Flex 主轴方向均匀分配弹性元素,相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐。
- FlexAlign.SpaceAround:Flex 主轴方向均匀分配弹性元素,相邻子组件之间距离相同。第一个子组件到主轴起始端的距离和最后一个子组件到主轴终点端的距离是相邻元素之间距离的一半。
- FlexAlign.SpaceEvenly:Flex 主轴方向元素等间距布局,相邻子组件之间的间距、第一个子组件与主轴起始端的间距、最后一个子组件到主轴终点端的间距均相等。
column 容器
FlexAlign.start
FlexAlign.Center
FlexAlign.End
FlexAlign.SpaceBetween
FlexAlign.SpaceAround
FlexAlign.SpaceEvenly
row 容器
FlexAlign.start
FlexAlign.Center
FlexAlign.End
FlexAlign.SpaceBetween
FlexAlign.SpaceAround
FlexAlign.SpaceEvenly
在交叉轴上
在交叉轴中视容器而使用不同的枚举
column 容器
在 column 容器中使用 HorizontalAlign 枚举来确定在交叉轴的对齐方式
row 容器
在 row 容器中使用 VerticalAlign 枚举来确定在交叉轴的对齐方式