FlexboxLayout - NativeScript-Vue 中文

<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>

属性

名称	类型	描述
`flexDirection`	`字符串`	设置在 Flexbox 容器中放置子元素的方向。有效值 `row`（水平，从左到右）、 `row-reverse`（水平，从右到左）、 `column`（垂直，从上到下），以及 `column-reverse`（垂直，从下到上）。默认值：`row`。
`flexWrap`	`字符串`	设置子元素是强制单行还是可以换行。如果设置为多行，则还定义交叉轴，该交叉轴决定新行的堆叠方向。有效值 `nowrap`（单行，可能导致容器溢出）、 `wrap`（多行，方向由 `flexDirection` 定义），以及 `wrap-reverse`（多行，与 `flexDirection` 定义的方向相反）。默认值：`nowrap`。
`justifyContent`	`字符串`	设置子元素沿主轴的对齐方式。您可以使用它在所有子元素在一行上且不灵活或灵活但已达到其最大大小时分配剩余空间。您还可以使用它来控制项目溢出时对齐方式。有效值 `flex-start`（项目紧贴开始线）、 `flex-end`（项目紧贴结束线）、 `center`（项目沿线条居中）、 `space-between`（项目均匀分布在线条上；第一个项目在开始线上，最后一个项目在结束线上），以及 `space-around`（项目均匀分布在线条上，并在它们周围留有相等的空间）。默认值：`flex-start`。
`alignItems`	`字符串`	（仅限 Android）设置子元素在当前行上的交叉轴上的对齐方式。充当交叉轴的 `justifyContent`。有效值 `flex-start`（项目的交叉开始边距边缘放置在交叉开始线上）、 `flex-end`（项目的交叉结束边距边缘放置在交叉结束线上）、 `center`（项目在交叉轴上居中）、 `baseline`（项目的基线对齐），以及 `stretch`（项目被拉伸以填满容器，但尊重 `min-width` 和 `max-width`）。默认值：`stretch`。
`alignContent`	`字符串`	设置如何在交叉轴上对齐 Flex 容器中的行，类似于 `justifyContent` 如何在主轴内对齐单个项目。当 Flex 容器只有一行时，此属性无效。有效值 `flex-start`（行紧贴容器的开头）、 `flex-end`（行紧贴容器的结尾）、 `center`（行紧贴容器的中心）、 `space-between`（行均匀分布；第一行位于容器的开头，而最后一行位于结尾）、 `space-around`（行均匀分布，它们之间留有相等的空间），以及 `stretch`（行被拉伸以占用剩余空间）。默认值：`stretch`。

子元素的附加属性

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

名称	类型	描述
`order`	`数字`	设置子元素相对于彼此出现的顺序。
`flexGrow`	`数字`	指示子元素应该在必要时增长。设置子元素相对于 Flex 容器中其他子元素的增长比例。
`flexShrink`	`数字`	指示子元素在行空间不足时应该缩小。设置 Flex 项目相对于 Flex 容器中其他子元素的缩小比例。如果未指定，则其值为 `1`。
`alignSelf`	`字符串`	（仅限 Android）覆盖子元素的 `alignItems` 值。有效值 `flex-start`（项目的交叉开始边距边缘放置在交叉开始线上）、 `flex-end`（项目的交叉结束边距边缘放置在交叉结束线上）、 `center`（项目在交叉轴上居中）、 `baseline`（项目的基线对齐），以及 `stretch`（项目被拉伸以填满容器，但尊重 `min-width` 和 `max-width`）。默认值：`stretch`。
`flexWrapBefore`	`布尔值`	当 `true` 时，强制项目换行。此属性不是官方 Flexbox 规范的一部分。默认值：`false`。

示例