版本：0.81

布局属性

信息

关于这些属性的更详细示例可以在使用 Flexbox 布局页面找到。

示例

以下示例展示了不同的属性如何影响或塑造 React Native 布局。例如，您可以在更改属性 flexWrap 的值的同时，尝试在 UI 中添加或移除方块。

TypeScript
JavaScript

参考

属性

`alignContent`

alignContent 控制行如何在交叉轴方向上对齐，覆盖父级的 alignContent。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly')	否

`alignItems`

alignItems 在交叉轴方向上对齐子元素。例如，如果子元素是垂直流动的，alignItems 控制它们如何水平对齐。它的工作原理类似于 CSS 中的 align-items（默认值：stretch）。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')	否

`alignSelf`

alignSelf 控制子元素如何在交叉轴方向上对齐，覆盖父级的 alignItems。它的工作原理类似于 CSS 中的 align-self（默认值：auto）。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')	否

`aspectRatio`

宽高比控制节点未定义维度的大小。

在设置了宽度/高度的节点上，宽高比控制未设置维度的大小
在设置了 flex basis 的节点上，如果未设置，宽高比控制节点在交叉轴上的大小
在具有测量函数的节点上，宽高比的工作原理仿佛测量函数测量的是 flex basis
在具有 flex grow/shrink 的节点上，如果未设置，宽高比控制节点在交叉轴上的大小
宽高比会考虑最小/最大尺寸

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`borderBottomWidth`

borderBottomWidth 的工作原理类似于 CSS 中的 border-bottom-width。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number	否

`borderEndWidth`

当方向为 ltr 时，borderEndWidth 等同于 borderRightWidth。当方向为 rtl 时，borderEndWidth 等同于 borderLeftWidth。

类型	是否必填
number	否

`borderLeftWidth`

borderLeftWidth 的工作原理类似于 CSS 中的 border-left-width。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number	否

`borderRightWidth`

borderRightWidth 的工作原理类似于 CSS 中的 border-right-width。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number	否

`borderStartWidth`

当方向为 ltr 时，borderStartWidth 等同于 borderLeftWidth。当方向为 rtl 时，borderStartWidth 等同于 borderRightWidth。

类型	是否必填
number	否

`borderTopWidth`

borderTopWidth 的工作原理类似于 CSS 中的 border-top-width。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number	否

`borderWidth`

borderWidth 的工作原理类似于 CSS 中的 border-width。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number	否

`bottom`

bottom 是偏移此组件底部边缘的逻辑像素数。

它的工作原理类似于 CSS 中的 bottom，但在 React Native 中你必须使用点数或百分比。不支持 Em 及其他单位。

详见 MDN CSS 参考了解更多关于 bottom 如何影响布局的详情。

类型	是否必填
number, string	否

`boxSizing`

boxSizing 定义如何计算元素的各种尺寸属性（width、height、minWidth、minHeight 等）。如果 boxSizing 为 border-box，这些尺寸适用于元素的边框盒。如果为 content-box，它们适用于元素的内容盒。默认值为 border-box。如果你想了解更多关于此属性如何工作的信息，Web 文档是一个很好的信息来源。

类型	是否必填
enum('border-box', 'content-box')	否

`columnGap`

columnGap 的工作原理类似于 CSS 中的 column-gap。React Native 中仅支持像素单位。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number	否

`direction`

direction 指定用户界面的方向流。默认值为 inherit，根节点除外，根节点的值将基于当前区域设置。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
enum('inherit', 'ltr', 'rtl')	否

`display`

display 设置此组件的显示类型。

它的工作原理类似于 CSS 中的 display，但仅支持值 'flex'、'none' 和 'contents'。默认值为 flex。

类型	是否必填
enum('none', 'flex', 'contents')	否

`end`

当方向为 ltr 时，end 等同于 right。当方向为 rtl 时，end 等同于 left。

此样式的优先级高于 left 和 right 样式。

类型	是否必填
number, string	否

`flex`

在 React Native 中，flex 的工作方式与 CSS 中的不完全相同。flex 是一个数字而不是字符串，它根据 Yoga 布局引擎工作。

当 flex 为正数时，它使组件具有灵活性，并且其大小将与其 flex 值成比例。因此，flex 设置为 2 的组件占据的空间将是 flex 设置为 1 的组件的两倍。flex: <正数> 等同于 flexGrow: <正数>, flexShrink: 1, flexBasis: 0。

当 flex 为 0 时，组件根据 width 和 height 调整大小，并且不可伸缩。

当 flex 为 -1 时，组件通常根据 width 和 height 调整大小。但是，如果没有足够的空间，组件将缩小到其 minWidth 和 minHeight。

flexGrow、flexShrink 和 flexBasis 的工作方式与 CSS 中相同。

类型	是否必填
number	否

`flexBasis`

flexBasis 是一种与轴无关的方式，用于提供项目沿主轴的默认大小。设置子元素的 flexBasis 类似于设置该子元素的 width（如果其父级是 flexDirection: row 的容器）或设置子元素的 height（如果其父级是 flexDirection: column 的容器）。项目的 flexBasis 是该项目的默认大小，即在进行任何 flexGrow 和 flexShrink 计算之前的大小。

类型	是否必填
number, string	否

`flexDirection`

flexDirection 控制容器的子元素走向哪个方向。row 从左到右，column 从上到下，你可以猜到另外两个做什么。它的工作原理类似于 CSS 中的 flex-direction，除了默认值为 column。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
enum('row', 'row-reverse', 'column', 'column-reverse')	否

`flexGrow`

flexGrow 描述容器内的任何空间应如何沿主轴在其子元素之间分配。在布局其子元素后，容器将根据其子元素指定的 flex grow 值分配任何剩余空间。

flexGrow 接受任何 >= 0 的浮点数值，默认值为 0。容器将根据子元素的 flexGrow 值加权分配任何剩余空间。

类型	是否必填
number	否

`flexShrink`

flexShrink 描述在子元素的总大小超出容器主轴大小的情况下，如何沿主轴缩小子元素。flexShrink 与 flexGrow 非常相似，如果任何超出大小被视为负剩余空间，则可以以相同的方式思考。这两个属性也可以很好地配合使用，允许子元素根据需要增长和缩小。

flexShrink 接受任何 >= 0 的浮点数值，默认值为 0。容器将根据子元素的 flexShrink 值加权缩小子元素。

类型	是否必填
number	否

`flexWrap`

flexWrap 控制子元素在到达 flex 容器末尾后是否可以换行。它的工作原理类似于 CSS 中的 flex-wrap（默认值：nowrap）。

注意，它不再与 alignItems: stretch（默认值）一起工作，因此你可能想使用 alignItems: flex-start 例如（破坏性变更详情：https://github.com/facebook/react-native/releases/tag/v0.28.0）。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
enum('wrap', 'nowrap', 'wrap-reverse')	否

`gap`

gap 的工作原理类似于 CSS 中的 gap。React Native 中仅支持像素单位。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number	否

`height`

height 设置此组件的高度。

它的工作原理类似于 CSS 中的 height，但在 React Native 中你必须使用点数或百分比。不支持 Em 及其他单位。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`inset`

备注

inset 仅在新架构上可用

设置 inset 的效果与设置 top、bottom、right 和 left 属性相同。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`insetBlock`

备注

insetBlock 仅在新架构上可用

等同于 top 和 bottom。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`insetBlockEnd`

备注

insetBlockEnd 仅在新架构上可用

等同于 bottom。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`insetBlockStart`

备注

insetBlockStart 仅在新架构上可用

等同于 top。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`insetInline`

备注

insetInline 仅在新架构上可用

等同于 right 和 left。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`insetInlineEnd`

备注

insetInlineEnd 仅在新架构上可用

当方向为 ltr 时，insetInlineEnd 等同于 right。当方向为 rtl 时，insetInlineEnd 等同于 left。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`insetInlineStart`

备注

insetInlineStart 仅在新架构上可用

当方向为 ltr 时，insetInlineStart 等同于 left。当方向为 rtl 时，insetInlineStart 等同于 right。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`isolation`

备注

isolation 仅在新架构上可用

isolation 允许你形成一个堆叠上下文。

有两个值：

auto（默认值）：无任何作用。
isolate：形成堆叠上下文。

类型	是否必填
enum('auto', 'isolate')	否

`justifyContent`

justifyContent 在主轴方向上对齐子元素。例如，如果子元素是垂直流动的，justifyContent 控制它们如何垂直对齐。它的工作原理类似于 CSS 中的 justify-content（默认值：flex-start）。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')	否

`left`

left 是偏移此组件左边缘的逻辑像素数。

它的工作原理类似于 CSS 中的 left，但在 React Native 中你必须使用点数或百分比。不支持 Em 及其他单位。

详见 MDN CSS 参考了解更多关于 left 如何影响布局的详情。

类型	是否必填
number, string	否

`margin`

设置 margin 的效果与设置 marginTop、marginLeft、marginBottom 和 marginRight 相同。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`marginBottom`

marginBottom 的工作原理类似于 CSS 中的 margin-bottom。详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`marginBlock`

等同于 marginVertical。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`marginBlockEnd`

等同于 marginBottom。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`marginBlockStart`

等同于 marginTop。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`marginEnd`

当方向为 ltr 时，marginEnd 等同于 marginRight。当方向为 rtl 时，marginEnd 等同于 marginLeft。

类型	是否必填
number, string	否

`marginHorizontal`

设置 marginHorizontal 的效果与同时设置 marginLeft 和 marginRight 相同。

类型	是否必填
number, string	否

`marginInline`

等同于 marginHorizontal。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`marginInlineEnd`

当方向为 ltr 时，marginInlineEnd 等同于 marginEnd（即 marginRight）。当方向为 rtl 时，marginInlineEnd 等同于 marginEnd（即 marginLeft）。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`marginInlineStart`

当方向为 ltr 时，marginInlineStart 等同于 marginStart（即 marginLeft）。当方向为 rtl 时，marginInlineStart 等同于 marginStart（即 marginRight）。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`marginLeft`

marginLeft 的工作原理类似于 CSS 中的 margin-left。详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`marginRight`

marginRight 的工作原理类似于 CSS 中的 margin-right。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`marginStart`

当方向为 ltr 时，marginStart 等同于 marginLeft。当方向为 rtl 时，marginStart 等同于 marginRight。

类型	是否必填
number, string	否

`marginTop`

marginTop 的工作原理类似于 CSS 中的 margin-top。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`marginVertical`

设置 marginVertical 的效果与同时设置 marginTop 和 marginBottom 相同。

类型	是否必填
number, string	否

`maxHeight`

maxHeight 是此组件的最大高度，单位为逻辑像素。

它的工作原理类似于 CSS 中的 max-height，但在 React Native 中你必须使用点数或百分比。不支持 Em 及其他单位。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`maxWidth`

maxWidth 是此组件的最大宽度，单位为逻辑像素。

它的工作原理类似于 CSS 中的 max-width，但在 React Native 中你必须使用点数或百分比。不支持 Em 及其他单位。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`minHeight`

minHeight 是此组件的最小高度，单位为逻辑像素。

它的工作原理类似于 CSS 中的 min-height，但在 React Native 中你必须使用点数或百分比。不支持 Em 及其他单位。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`minWidth`

minWidth 是此组件的最小宽度，单位为逻辑像素。

它的工作原理类似于 CSS 中的 min-width，但在 React Native 中你必须使用点数或百分比。不支持 Em 及其他单位。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`overflow`

overflow 控制子元素如何测量和显示。overflow: hidden 会导致视图被裁剪，而 overflow: scroll 会导致视图独立于其父级的主轴进行测量。它的工作原理类似于 CSS 中的 overflow（默认值：visible）。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
enum('visible', 'hidden', 'scroll')	否

`padding`

设置 padding 的效果与设置 paddingTop、paddingBottom、paddingLeft 和 paddingRight 相同。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`paddingBottom`

paddingBottom 的工作原理类似于 CSS 中的 padding-bottom。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`paddingBlock`

等同于 paddingVertical。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`paddingBlockEnd`

等同于 paddingBottom。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`paddingBlockStart`

等同于 paddingTop。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`paddingEnd`

当方向为 ltr 时，paddingEnd 等同于 paddingRight。当方向为 rtl 时，paddingEnd 等同于 paddingLeft。

类型	是否必填
number, string	否

`paddingHorizontal`

设置 paddingHorizontal 类似于同时设置 paddingLeft 和 paddingRight。

类型	是否必填
number, string	否

`paddingInline`

等同于 paddingHorizontal。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`paddingInlineEnd`

当方向为 ltr 时，paddingInlineEnd 等同于 paddingEnd（即 paddingRight）。当方向为 rtl 时，paddingInlineEnd 等同于 paddingEnd（即 paddingLeft）。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`paddingInlineStart`

当方向为 ltr 时，paddingInlineStart 等同于 paddingStart（即 paddingLeft）。当方向为 rtl 时，paddingInlineStart 等同于 paddingStart（即 paddingRight）。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`paddingLeft`

paddingLeft 的工作原理类似于 CSS 中的 padding-left。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`paddingRight`

paddingRight 的工作原理类似于 CSS 中的 padding-right。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`paddingStart`

当方向为 ltr 时，paddingStart 等同于 paddingLeft。当方向为 rtl 时，paddingStart 等同于 paddingRight。

类型	是否必填
number, string	否

`paddingTop`

paddingTop 的工作原理类似于 CSS 中的 padding-top。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`paddingVertical`

设置 paddingVertical 类似于同时设置 paddingTop 和 paddingBottom。

类型	是否必填
number, string	否

`position`

React Native 中的 position 类似于常规 CSS，但默认情况下所有内容都设置为 relative。

relative 将根据布局的正常流定位元素。插入位置（top、bottom、left、right）将相对于此布局进行偏移。

absolute 将元素从布局的正常流中取出。插入位置将相对于其包含块进行偏移。

static 将根据布局的正常流定位元素。插入位置将无效。 static 元素不会为绝对定位的后代形成包含块。

有关更多信息，请参阅 Flexbox 布局文档。此外，Yoga 文档有关於 position 在 React Native 和 CSS 之间差异的更多详情。

类型	是否必填
enum('absolute', 'relative', 'static')	否

`right`

right 是偏移此组件右边缘的逻辑像素数。

它的工作原理类似于 CSS 中的 right，但在 React Native 中你必须使用点数或百分比。不支持 Em 及其他单位。

详见 MDN CSS 参考了解更多关于 right 如何影响布局的详情。

类型	是否必填
number, string	否

`rowGap`

rowGap 的工作原理类似于 CSS 中的 row-gap。React Native 中仅支持像素单位。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number	否

`start`

当方向为 ltr 时，start 等同于 left。当方向为 rtl 时，start 等同于 right。

此样式的优先级高于 left、right 和 end 样式。

类型	是否必填
number, string	否

`top`

top 是偏移此组件顶部边缘的逻辑像素数。

它的工作原理类似于 CSS 中的 top，但在 React Native 中你必须使用点数或百分比。不支持 Em 及其他单位。

详见 MDN CSS 参考了解更多关于 top 如何影响布局的详情。

类型	是否必填
number, string	否

`width`

width 设置此组件的宽度。

它的工作原理类似于 CSS 中的 width，但在 React Native 中你必须使用点数或百分比。不支持 Em 及其他单位。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number, string	否

`zIndex`

zIndex 控制哪些组件显示在其他组件之上。通常，你不使用 zIndex。组件根据它们在文档树中的顺序渲染，因此后面的组件会绘制在前面的组件之上。如果你有动画或自定义模态界面且不希望出现这种行为，zIndex 可能会很有用。

它的工作原理类似于 CSS 的 z-index 属性 - 具有较大 zIndex 的组件将渲染在顶部。可以将 z 轴方向想象为从手机指向你的眼睛。

在 iOS 上，zIndex 可能需要 View 互为兄弟节点才能按预期工作。

详见 MDN CSS 参考了解更多详情。

类型	是否必填
number	否

示例​

参考

属性​

alignContent​

alignItems​

alignSelf​

aspectRatio​

borderBottomWidth​

borderEndWidth​

borderLeftWidth​

borderRightWidth​

borderStartWidth​

borderTopWidth​

borderWidth​

bottom​

boxSizing​

columnGap​

direction​

display​

end​

flex​

flexBasis​

flexDirection​

flexGrow​

flexShrink​

flexWrap​

gap​

height​

inset​

insetBlock​

insetBlockEnd​

insetBlockStart​

insetInline​

insetInlineEnd​

insetInlineStart​

isolation​

justifyContent​

left​

margin​

marginBottom​

marginBlock​

marginBlockEnd​

marginBlockStart​

marginEnd​

marginHorizontal​

marginInline​

marginInlineEnd​

marginInlineStart​

marginLeft​

marginRight​

marginStart​

marginTop​

marginVertical​

maxHeight​

maxWidth​

minHeight​

minWidth​

overflow​

padding​

paddingBottom​

paddingBlock​

paddingBlockEnd​

paddingBlockStart​

paddingEnd​

paddingHorizontal​

paddingInline​

paddingInlineEnd​

paddingInlineStart​

paddingLeft​

paddingRight​

paddingStart​

paddingTop​

paddingVertical​

position​

right​

rowGap​

start​

top​

width​

zIndex​

示例

属性

`alignContent`

`alignItems`

`alignSelf`

`aspectRatio`

`borderBottomWidth`

`borderEndWidth`

`borderLeftWidth`

`borderRightWidth`

`borderStartWidth`

`borderTopWidth`

`borderWidth`

`bottom`

`boxSizing`

`columnGap`

`direction`

`display`

`end`

`flex`

`flexBasis`

`flexDirection`

`flexGrow`

`flexShrink`

`flexWrap`

`gap`

`height`

`inset`

`insetBlock`

`insetBlockEnd`

`insetBlockStart`

`insetInline`

`insetInlineEnd`

`insetInlineStart`

`isolation`

`justifyContent`

`left`

`margin`

`marginBottom`

`marginBlock`

`marginBlockEnd`

`marginBlockStart`

`marginEnd`

`marginHorizontal`

`marginInline`

`marginInlineEnd`

`marginInlineStart`

`marginLeft`

`marginRight`

`marginStart`

`marginTop`

`marginVertical`

`maxHeight`

`maxWidth`

`minHeight`

`minWidth`

`overflow`

`padding`

`paddingBottom`

`paddingBlock`

`paddingBlockEnd`

`paddingBlockStart`

`paddingEnd`

`paddingHorizontal`

`paddingInline`

`paddingInlineEnd`

`paddingInlineStart`

`paddingLeft`

`paddingRight`

`paddingStart`

`paddingTop`

`paddingVertical`

`position`

`right`

`rowGap`

`start`

`top`

`width`

`zIndex`