FlexboxLayout

This is an overview of the most common usage of FlexboxLayout. For more information about the available properties, methods, or events, head over to the complete API documentation for FlexboxLayout.

<FlexboxLayout> 是一个布局容器,它提供了 CSS Flexbox 布局的非精确实现。此布局允许您水平和垂直排列子组件。

例子

默认的flex布局

以下示例创建一行,包含三个大小相等的元素,这些元素跨越整个屏幕高度。

<FlexboxLayout backgroundColor="#3c495e">
  <Label text="first" width="70" backgroundColor="#43b883"/>
  <Label text="second" width="70" backgroundColor="#1c6b48"/>
  <Label text="third" width="70" backgroundColor="#289062"/>
</FlexboxLayout>

列flex布局

以下示例创建一个包含三个大小相等的元素的列,这些元素跨越整个屏幕宽度。

<FlexboxLayout flexDirection="column" backgroundColor="#3c495e">
  <Label text="first" height="70" backgroundColor="#43b883"/>
  <Label text="second" height="70" backgroundColor="#1c6b48"/>
  <Label text="third" height="70" backgroundColor="#289062"/>
</FlexboxLayout>

将项目对齐的行flex布局 flex-start

以下示例创建一个位于屏幕顶部的三个项目的行。项目按其声明的顺序放置。

<FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
  <Label text="first" width="70" height="70" backgroundColor="#43b883"/>
  <Label text="second" width="70" height="70" backgroundColor="#1c6b48"/>
  <Label text="third" width="70" height="70" backgroundColor="#289062"/>
</FlexboxLayout>

具有自定义顺序的行flex布局

以下示例创建一个位于屏幕顶部的三个项目的行。项目按自定义顺序放置。

<FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
  <Label text="first" order="2" width="70" height="70" backgroundColor="#43b883"/>
  <Label text="second" order="3" width="70" height="70" backgroundColor="#1c6b48"/>
  <Label text="third" order="1" width="70" height="70" backgroundColor="#289062"/>
</FlexboxLayout>

行flex布局与包装

以下示例创建了四个启用换行的项目。当行空间不足时,容器将最后一项包装在新行上。

<FlexboxLayout flexWrap="wrap" backgroundColor="#3c495e">
  <Label text="first" width="30%" backgroundColor="#43b883"/>
  <Label text="second" width="30%" backgroundColor="#1c6b48"/>
  <Label text="third" width="30%" backgroundColor="#289062"/>
  <Label text="fourth" width="30%" backgroundColor="#289062"/>
</FlexboxLayout>

具有相反顺序的列flex布局和具有不同的项目 alignSelf

以下示例显示如何使用:

  • flexDirection 从底部开始将项目放在列中。
  • justifyContent 在垂直放置的项目之间创建相等的间距。
  • alignSelf 修改主轴上的项目位置。
<FlexboxLayout flexDirection="column-reverse"
               justifyContent="space-around" backgroundColor="#3c495e">
  <Label text="first" height="70" backgroundColor="#43b883"/>
  <Label text="second" alignSelf="center" width="70" height="70" backgroundColor="#1c6b48"/>
  <Label text="third\nflex-end" alignSelf="flex-end" width="70" height="70" backgroundColor="#289062"/>
  <Label text="fourth" height="70" backgroundColor="#289062"/>
</FlexboxLayout>

道具

名称类型描述
flexDirectionString设置将子元素放置在Flexbox容器中的方向。
有效值:
row (水平,从左到右),
row-reverse (水平,从右到左),
column (垂直,从上到下)和
column-reverse (垂直,从下到上)。
默认值: row
flexWrapString设置子元素是强制在一行中还是可以流入多行。如果设置为多行,还定义了确定新行堆叠方向的横轴。
有效值:
nowrap (可能导致容器溢出的单行),
wrap (多行,方向定义 flexDirection)和
wrap-reverse (多行) ,与( flexDirection))定义的方向相反。
默认值:nowrap
justifyContentString设置子元素沿主轴的对齐方式。当一行中的所有子元素不灵活或灵活但已达到其最大大小时,您可以使用它来分配剩余空间。您还可以使用它来控制项目溢出线时的对齐方式。
有效值:
flex-start (项目朝向起始行打包),
flex-end (项目朝向结束行打包),
center (项目沿着行居中),
space-between (项目均匀分布在行上;第一项目位于起始行,最后一行结束线上的
space-around 项目)和(项目均匀分布在线上,周围空间相等)。
默认值:flex-start
alignItemsString(仅限Android)设置子元素沿当前行的横轴的对齐方式。作用 justifyContent 于横轴。
有效值:
flex-start (交叉开始边缘边缘放置在交叉起始线上),
flex-end (项目的交叉边缘边缘放置在交叉起始线上),
center (项目在横轴上居中) ,
baseline (项目基线是对齐的),和
stretch (项目被拉伸以填充容器,但尊重 min-widthmax-width)。
默认值: stretch
alignContentString设置线在横轴上的Flex容器中的 justifyContent 对齐方式,类似于在主轴内对齐各个项目的方式。
当flex容器只有一行时,此属性无效。
有效值:
flex-start (行打包到容器的开头),
flex-end (行打包到容器的末尾),
center (行打包到容器的中心),
space-between (行均匀分布;第一行是容器的开始,而最后一个是在末尾),
space-around (线条均匀分布,它们之间的空间相等),
stretch (线条被拉伸以占据剩余空间)。
默认值:stretch

额外的儿童道具

当元素是直接子元素时 <FlexboxLayout>,您可以使用以下附加属性。

名称类型描述
orderNumber设置子元素相对于彼此显示的顺序。
flexGrowNumber表示如有必要,孩子的体型会增大。设置子项与Flex容器中其余子元素成比例增长的程度。
flexShrinkNumber表示当行空间不足时,子项应缩小。设置弹性项目将与Flex容器中其余子元素成比例缩小的程度。未指定时,其值设置为 1
alignSelfString(仅限Android)覆盖子项的 alignItems 值。
有效值:
flex-start (交叉开始边缘边缘放置在交叉起始线上),
flex-end (项目的交叉边缘边缘放置在交叉起始线上),
center (项目以十字轴为中心) ,
baseline (项目基线对齐),
stretch (项目被拉伸以填充容器,但尊重 min-widthmax-width)。
默认值: stretch
flexWrapBeforeBoolean何时 true,强制项目换行到新行。此属性不是官方Flexbox规范的一部分。
默认值: false
Contributors