布局属性

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

示例

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

TypeScript
JavaScript

参考

属性

`alignContent`

alignContent 控制行在交叉轴方向上的对齐方式，覆盖父元素的 alignContent。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/align-content。

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

`alignItems`

alignItems 在交叉轴方向上对齐子元素。例如，如果子元素是垂直流动的，则 alignItems 控制它们如何水平对齐。它类似于 CSS 中的 align-items（默认值：stretch）。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/align-items。

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

`alignSelf`

alignSelf 控制子元素如何在交叉轴方向上对齐，覆盖父元素的 alignItems。它类似于 CSS 中的 align-self（默认值：auto）。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/align-self。

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

`aspectRatio`

纵横比控制节点未定义尺寸的大小。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/aspect-ratio。

在具有设定宽度/高度的节点上，纵横比控制未设定尺寸的大小
在具有设定 flex basis 的节点上，如果未设定，纵横比控制交叉轴上节点的大小
在具有 measure function 的节点上，纵横比的作用如同 measure function 测量 flex basis
在具有 flex grow/shrink 的节点上，如果未设定，纵横比控制交叉轴上节点的大小
纵横比考虑最小/最大尺寸

类型	必需
number, string	否

`borderBottomWidth`

borderBottomWidth 的作用类似于 CSS 中的 border-bottom-width。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/border-bottom-width。

类型	必需
number	否

`borderEndWidth`

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

类型	必需
number	否

`borderLeftWidth`

borderLeftWidth 的作用类似于 CSS 中的 border-left-width。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/border-left-width。

类型	必需
number	否

`borderRightWidth`

borderRightWidth 的作用类似于 CSS 中的 border-right-width。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/border-right-width。

类型	必需
number	否

`borderStartWidth`

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

类型	必需
number	否

`borderTopWidth`

borderTopWidth 的作用类似于 CSS 中的 border-top-width。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/border-top-width。

类型	必需
number	否

`borderWidth`

borderWidth 的作用类似于 CSS 中的 border-width。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/border-width。

类型	必需
number	否

`bottom`

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

它的工作方式类似于 CSS 中的 bottom，但在 React Native 中，您必须使用点或百分比。不支持 Ems 和其他单位。

有关 bottom 如何影响布局的更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/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 中仅支持像素单位。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/column-gap。

类型	必需
number	否

`direction`

direction 指定用户界面的方向流。默认值为 inherit，但根节点的值将基于当前区域设置。更多细节请参考 https://www.yogalayout.dev/docs/styling/layout-direction。

类型	必需	平台
enum('inherit', 'ltr', 'rtl')	否	iOS

`display`

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

它的工作方式类似于 CSS 中的 display，但仅支持 'flex' 和 'none'。 'flex' 是默认值。

类型	必需
enum('none', 'flex')	否

`end`

当 direction 为 ltr 时，end 等同于 right。当 direction 为 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 是一种轴独立的提供项目沿主轴默认大小的方式。如果父容器的 flexDirection: row，则设置子元素的 flexBasis 类似于设置该子元素的 width；如果父容器的 flexDirection: column，则设置子元素的 height。项目的 flexBasis 是该项目的默认大小，即在执行任何 flexGrow 和 flexShrink 计算之前项目的大小。

类型	必需
number, string	否

`flexDirection`

flexDirection 控制容器的子元素朝哪个方向流动。 row 从左到右，column 从上到下，您或许可以猜到其他两个的作用。它的工作方式类似于 CSS 中的 flex-direction，但默认值为 column。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/flex-direction。

类型	必需
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）。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/flex-wrap。请注意，它不再与 alignItems: stretch（默认值）一起使用，因此您可能希望使用 alignItems: flex-start 例如（重大更改详情： https://github.com/facebook/react-native/releases/tag/v0.28.0）。

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

`gap`

gap 的作用类似于 CSS 中的 gap。在 React Native 中仅支持像素单位。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/gap。

类型	必需
number	否

`height`

height 设置此组件的高度。

它的工作方式类似于 CSS 中的 height，但在 React Native 中，您必须使用点或百分比。不支持 Ems 和其他单位。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/height。

类型	必需
number, string	否

`justifyContent`

justifyContent 在主轴方向上对齐子元素。例如，如果子元素是垂直流动的，则 justifyContent 控制它们如何垂直对齐。它类似于 CSS 中的 justify-content（默认值：flex-start）。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/justify-content。

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

`left`

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

它的工作方式类似于 CSS 中的 left，但在 React Native 中，您必须使用点或百分比。不支持 Ems 和其他单位。

有关 left 如何影响布局的更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/left。

类型	必需
number, string	否

`margin`

设置 margin 的效果与分别设置 marginTop、marginLeft、marginBottom 和 marginRight 相同。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/margin。

类型	必需
number, string	否

`marginBottom`

marginBottom 的作用类似于 CSS 中的 margin-bottom。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/margin-bottom。

类型	必需
number, string	否

`marginEnd`

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

类型	必需
number, string	否

`marginHorizontal`

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

类型	必需
number, string	否

`marginLeft`

marginLeft 的作用类似于 CSS 中的 margin-left。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/margin-left。

类型	必需
number, string	否

`marginRight`

marginRight 的作用类似于 CSS 中的 margin-right。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/margin-right。

类型	必需
number, string	否

`marginStart`

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

类型	必需
number, string	否

`marginTop`

marginTop 的作用类似于 CSS 中的 margin-top。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/margin-top。

类型	必需
number, string	否

`marginVertical`

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

类型	必需
number, string	否

`maxHeight`

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

它的工作方式类似于 CSS 中的 max-height，但在 React Native 中，您必须使用点或百分比。不支持 Ems 和其他单位。

更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/max-height。

类型	必需
number, string	否

`maxWidth`

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

它的工作方式类似于 CSS 中的 max-width，但在 React Native 中，您必须使用点或百分比。不支持 Ems 和其他单位。

更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/max-width。

类型	必需
number, string	否

`minHeight`

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

它的工作方式类似于 CSS 中的 min-height，但在 React Native 中，您必须使用点或百分比。不支持 Ems 和其他单位。

更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/min-height。

类型	必需
number, string	否

`minWidth`

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

它的工作方式类似于 CSS 中的 min-width，但在 React Native 中，您必须使用点或百分比。不支持 Ems 和其他单位。

更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/min-width。

类型	必需
number, string	否

`overflow`

overflow 控制如何测量和显示子元素。 overflow: hidden 导致视图被裁剪，而 overflow: scroll 导致视图独立于其父元素的主轴进行测量。它的工作方式类似于 CSS 中的 overflow（默认值：visible）。更多细节请参考 https://mdn.org.cn/en/docs/Web/CSS/overflow。

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

`padding`

设置 padding 的效果与分别设置 paddingTop、paddingBottom、paddingLeft 和 paddingRight 相同。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/padding。

类型	必需
number, string	否

`paddingBottom`

paddingBottom 的作用类似于 CSS 中的 padding-bottom。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/padding-bottom。

类型	必需
number, string	否

`paddingEnd`

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

类型	必需
number, string	否

`paddingHorizontal`

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

类型	必需
number, string	否

`paddingLeft`

paddingLeft 的作用类似于 CSS 中的 padding-left。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/padding-left。

类型	必需
number, string	否

`paddingRight`

paddingRight 的作用类似于 CSS 中的 padding-right。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/padding-right。

类型	必需
number, string	否

`paddingStart`

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

类型	必需
number, string	否

`paddingTop`

paddingTop 的作用类似于 CSS 中的 padding-top。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/padding-top。

类型	必需
number, ,string	否

`paddingVertical`

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

类型	必需
number, string	否

`position`

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

relative 将根据布局的正常流程定位元素。 Insets (top, bottom, left, right) 将相对于此布局偏移。

absolute 将元素从布局的正常流程中移除。 Insets 将相对于其包含块偏移。

static 将根据布局的正常流程定位元素。 Insets 将不起作用。 static 元素不会为其绝对后代形成包含块。

有关更多信息，请参阅 Flexbox 布局文档。此外，Yoga 文档提供了关于 React Native 和 CSS 之间 position 差异的更多详细信息。

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

`right`

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

它的工作方式类似于 CSS 中的 right，但在 React Native 中，您必须使用点或百分比。不支持 Ems 和其他单位。

有关 right 如何影响布局的更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/right。

类型	必需
number, string	否

`rowGap`

rowGap 的作用类似于 CSS 中的 row-gap。在 React Native 中仅支持像素单位。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/row-gap。

类型	必需
number	否

`start`

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

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

类型	必需
number, string	否

`top`

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

它的工作方式类似于 CSS 中的 top，但在 React Native 中，您必须使用点或百分比。不支持 Ems 和其他单位。

有关 top 如何影响布局的更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/top。

类型	必需
number, string	否

`width`

width 设置此组件的宽度。

它的工作方式类似于 CSS 中的 width，但在 React Native 中，您必须使用点或百分比。不支持 Ems 和其他单位。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/width。

类型	必需
number, string	否

`zIndex`

zIndex 控制哪些组件显示在其他组件的顶部。通常，您不使用 zIndex。组件根据它们在文档树中的顺序呈现，因此后面的组件会覆盖较早的组件。如果您有动画或自定义模态界面，而您不希望出现这种行为，则 zIndex 可能会很有用。

它的工作方式类似于 CSS z-index 属性 - 具有较大 zIndex 的组件将在顶部呈现。将 z 方向想象成从手机指向您的眼球。更多细节请参考 https://mdn.org.cn/en-US/docs/Web/CSS/z-index。

在 iOS 上，zIndex 可能需要 View 彼此成为兄弟关系才能按预期工作。

类型	必需
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​

justifyContent​

left​

margin​

marginBottom​

marginEnd​

marginHorizontal​

marginLeft​

marginRight​

marginStart​

marginTop​

marginVertical​

maxHeight​

maxWidth​

minHeight​

minWidth​

overflow​

padding​

paddingBottom​

paddingEnd​

paddingHorizontal​

paddingLeft​

paddingRight​

paddingStart​

paddingTop​

paddingVertical​

position​

right​

rowGap​

start​

top​

width​

zIndex​

示例

属性