8.7 发布—WinterCG 兼容性第 1 部分
了解更多

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

项目按声明顺序放置，除非被 order 子属性覆盖。

示例 ​

默认 FlexboxLayout ​

以下示例创建了一行三个大小相等的元素，跨越整个屏幕高度。

xml
<FlexboxLayout backgroundColor="#3c495e">
  <Label text="first" width="70" backgroundColor="#43B3F4" />
  <Label text="second" width="70" backgroundColor="#075B88" />
  <Label text="third" width="70" backgroundColor="#1089CA" />
</FlexboxLayout>

默认 FlexboxLayout，其中项目与顶部对齐（flex-start） ​

以下示例创建了一行，其中项目与 FlexboxLayout 容器的顶部对齐（flex-start）。

xml
<FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
  <Label text="first" width="70" height="70" backgroundColor="#43B3F4" />
  <Label text="second" width="70" height="70" backgroundColor="#075B88" />
  <Label text="third" width="70" height="70" backgroundColor="#1089CA" />
</FlexboxLayout>

在 FlexboxLayout 中自定义项目排序 ​

以下示例使用 order 属性重新排序项目。

xml
<FlexboxLayout backgroundColor="#3c495e">
  <Label
    text="first"
    order="2"
    width="70"
    height="70"
    backgroundColor="#43B3F4"
  />
  <Label
    text="second"
    order="3"
    width="70"
    height="70"
    backgroundColor="#075B88"
  />
  <Label
    text="third"
    order="1"
    width="70"
    height="70"
    backgroundColor="#1089CA"
  />
</FlexboxLayout>

带有项目换行的 FlexboxLayout ​

以下示例显示了当没有足够的空间在第一行容纳所有项目时，项目会换行到新行。

xml
<FlexboxLayout flexWrap="wrap" backgroundColor="#3c495e">
  <Label text="first" width="30%" backgroundColor="#43B3F4" />
  <Label text="second" width="30%" backgroundColor="#075B88" />
  <Label text="third" width="30%" backgroundColor="#1089CA" />
  <Label text="fourth" width="30%" backgroundColor="#1089CA" />
</FlexboxLayout>

带有垂直方向（column）的 FlexboxLayout ​

以下示例创建了一列三个大小相等的元素，跨越整个屏幕宽度。

Flexbox 轴更改

这与默认的 flexDirection 相反，请注意项目是如何在列而不是行中布局的。

xml
<FlexboxLayout flexDirection="column" backgroundColor="#3c495e">
  <Label text="first" height="70" backgroundColor="#43B3F4" />
  <Label text="second" height="70" backgroundColor="#075B88" />
  <Label text="third" height="70" backgroundColor="#1089CA" />
</FlexboxLayout>

在 FlexboxLayout 中反转的项目，混合对齐 ​

以下示例以反向列方向放置项目，剩余空间在项目之间以及 FlexboxLayout 容器的开头/结尾之间分配，使用 justifyContent。

该示例还展示了项目如何使用 alignSelf 修改其位置。

xml
<FlexboxLayout
  flexDirection="column-reverse"
  justifyContent="space-around"
  backgroundColor="#3c495e"
>
  <Label text="first" height="70" backgroundColor="#43B3F4" />
  <Label
    text="second"
    alignSelf="center"
    width="70"
    height="70"
    backgroundColor="#075B88"
  />
  <Label
    text="third\nflex-end"
    alignSelf="flex-end"
    width="70"
    height="70"
    backgroundColor="#1089CA"
  />
  <Label text="fourth" height="70" backgroundColor="#1089CA" />
</FlexboxLayout>

属性 ​

flexDirection ​

ts
flexDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse'

设置在 flexbox 容器中放置子元素的方向。

有效值

  • row - 水平，从左到右
  • row-reverse - 水平，从右到左
  • column - 垂直，从上到下
  • column-reverse - 垂直，从下到上

默认值：row。

flexWrap ​

ts
flexWrap: 'nowrap' | 'wrap' | 'wrap-reverse'

设置子元素是否强制在一行中或可以流入多行。如果设置为多行，还定义横轴，它决定新行堆叠的方向。

有效值

  • nowrap - 单行，这可能会导致容器溢出
  • wrap - 多行，方向由 flexDirection 定义
  • wrap-reverse - 多行，与 flexDirection 定义的方向相反

默认值：nowrap。

justifyContent ​

ts
justifyContent: 'flex-start' |
  'flex-end' |
  'center' |
  'space-between' |
  'space-around'

设置子元素沿主轴的对齐方式。您可以使用它在所有子元素在一条线上都是不可伸缩或可以伸缩但已达到其最大尺寸时分配剩余空间。您还可以使用它来控制项目溢出线条时的对齐方式。

有效值

  • flex-start - 项目打包到起始线
  • flex-end - 项目打包到结束线
  • center - 项目沿线条居中
  • space-between - 项目在线条上均匀分布 - 第一个项目在起始线上，最后一个项目在结束线上
  • space-around - 项目在线条上均匀分布，周围有相等的空间

默认值：flex-start。

alignItems ​

ts
alignItems: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'

（仅限 Android）设置当前线条上子元素沿横轴的对齐方式。充当横轴的 justifyContent。

有效值

  • flex-start - 项目的横向开始边距边缘放置在横向开始线上
  • flex-end - 项目的横向结束边距边缘放置在横向结束线上
  • center - 项目在横轴上居中
  • baseline - 项目基线对齐
  • stretch - 项目拉伸以填充容器，但尊重 min-width 和 max-width

默认值：stretch。

alignContent ​

ts
alignContent: 'flex-start' |
  'flex-end' |
  'center' |
  'space-between' |
  'space-around' |
  'stretch'

设置行如何在横轴上与 flex 容器对齐，类似于 justifyContent 如何对齐主轴内的单个项目。

当 flex 容器只有一行时，此属性无效。

有效值

  • flex-start - 行打包到容器的开头
  • flex-end - 行打包到容器的结尾
  • center - 行打包到容器的中心
  • space-between - 行均匀分布；第一行在容器的开头，最后一行在结尾
  • space-around - 行均匀分布，它们之间有相等的间距
  • stretch - 行拉伸以占用剩余空间

默认值：stretch。

...继承 ​

未显示的其他继承属性。请参考 API 参考

子属性 ​

当元素是 <FlexboxLayout> 的直接子元素时，这些属性会被考虑在内

order ​

ts
order: number

设置子元素相对于彼此出现的顺序。

flexGrow ​

ts
flexGrow: number

指示子元素应在必要时增大。设置子元素相对于 flex 容器中其他子元素的增长比例。

flexShrink ​

ts
flexShrink: number

指示子元素在行空间不足时应缩小。设置 flex 项目相对于 flex 容器中其他子元素的缩小比例。当未指定时，其值为 1。

alignSelf ​

ts
alignSelf: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'

（仅限 Android）覆盖子元素的 alignItems 值。

有效值

  • flex-start（项目横向开始边距边缘放置在横向开始线上），
  • flex-end（项目横向结束边距边缘放置在横向结束线上），
  • center（项目在横轴上居中），
  • baseline（项目基线对齐），以及
  • stretch（项目拉伸以填充容器，但尊重 min-width 和 max-width）。

默认值：stretch。

flexWrapBefore ​

ts
flexWrapBefore: boolean

当 true 时，强制项目换行。

注意

此属性不是 CSS Flexbox 规范的一部分。

默认值：false。

上一页
RootLayout
下一页
WrapLayout