布局属性

信息

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

示例

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

TypeScript
JavaScript

参考

属性

`alignContent`

alignContent 控制行在交叉轴方向的对齐方式，覆盖父元素的 alignContent。

详情请参阅 MDN CSS 参考。

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

`alignItems`

alignItems 用来在交叉轴方向对齐子元素。例如，如果子元素是垂直排列的，alignItems 控制它们在水平方向上的对齐。它的工作机制与 CSS 中的 align-items 类似（默认值：stretch）。

详情请参阅 MDN CSS 参考。

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

`alignSelf`

alignSelf 控制单个子元素在交叉轴方向的对齐方式，覆盖父元素的 alignItems。它的工作机制与 CSS 中的 align-self 类似（默认值：auto）。

详情请参阅 MDN CSS 参考。

类型	必需
枚举('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 文档。

类型	必需
枚举('border-box', 'content-box')	否

`columnGap`

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

详情请参阅 MDN CSS 参考。

类型	必需
number	否

`direction`

direction 指定用户界面的文本方向流。默认值为 inherit，根节点除外，其值基于当前语言环境。

详情请参阅 MDN CSS 参考。

类型	必需
枚举('inherit', 'ltr', 'rtl')	否

`display`

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

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

类型	必需
枚举('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 尺寸；但空间不足时会收缩到最小宽度和高度。
flexGrow、flexShrink 和 flexBasis 的行为和 CSS 相同。

类型	必需
number	否

`flexBasis`

flexBasis 是沿主轴定义元素默认大小的独立于轴的属性。设置子元素的 flexBasis 类似于当父容器 flexDirection: row 时设置 width，或当父容器 flexDirection: column 时设置 height。它是子元素在进行 flexGrow 和 flexShrink 计算前的默认大小。

类型	必需
number, string	否

`flexDirection`

flexDirection 控制容器子元素的排列方向。row 表示从左到右，column 表示从上到下，另外两个方向分别是这两者的反向。它的作用类似于 CSS 中的 flex-direction，但默认值为 column。

详情请参阅 MDN CSS 参考。

类型	必需
枚举('row', 'row-reverse', 'column', 'column-reverse')	否

`flexGrow`

flexGrow 描述容器主轴上如何分配剩余空间。当容器布局完子元素后，会根据子元素的 flexGrow 比例分配剩余空间。

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 参考。

类型	必需
枚举('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 时，等同于 left。

详情请参阅 MDN CSS 参考。

类型	必需
number, string	否

`insetInlineStart`

备注

insetInlineStart 仅在新架构中可用

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

详情请参阅 MDN CSS 参考。

类型	必需
number, string	否

`isolation`

备注

isolation 仅在新架构中可用

isolation 允许你创建堆叠上下文。

有两个值：

auto（默认）：无效果。
isolate：创建堆叠上下文。

类型	必需
枚举('auto', 'isolate')	否

`justifyContent`

justifyContent 控制子元素在主轴方向的对齐方式。例如，如果子元素垂直排列，justifyContent 控制它们在垂直方向上的对齐。它的行为类似于 CSS 中的 justify-content（默认值：flex-start）。

详情请参阅 MDN CSS 参考。

类型	必需
枚举('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	否

示例​

参考

属性​

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`