布局属性

信息

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

示例

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

TypeScript

JavaScript

---

参考

属性

alignContent

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

更多详情请参见 MDN CSS Reference。

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

---

alignItems

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

更多详情请参见 MDN CSS Reference。

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

---

alignSelf

alignSelf 控制子元素在交叉方向上的对齐方式，会覆盖父元素的 alignItems。它的作用类似于 CSS 中的 align-self（默认值：auto）。

更多详情请参见 MDN CSS Reference。

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

---

aspectRatio

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

• 在设置了宽度/高度的节点上，宽高比控制未设置维度的大小
• 在设置了 flex basis 的节点上，如果交叉轴维度未设置，宽高比控制节点在交叉轴上的大小
• 在带有 measure 函数的节点上，宽高比的作用类似于 measure 函数测量 flex basis
• 在具有 flex grow/shrink 的节点上，如果交叉轴维度未设置，宽高比控制节点在交叉轴上的大小
• 宽高比会考虑最小/最大尺寸

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

borderBottomWidth

borderBottomWidth 的作用类似于 CSS 中的 border-bottom-width。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number	否

---

borderEndWidth

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

类型	是否必需
number	否

---

borderLeftWidth

borderLeftWidth 的作用类似于 CSS 中的 border-left-width。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number	否

---

borderRightWidth

borderRightWidth 的作用类似于 CSS 中的 border-right-width。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number	否

---

borderStartWidth

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

类型	是否必需
number	否

---

borderTopWidth

borderTopWidth 的作用类似于 CSS 中的 border-top-width。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number	否

---

borderWidth

borderWidth 的作用类似于 CSS 中的 border-width。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number	否

---

bottom

bottom 是用于偏移该组件底边的逻辑像素数。

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

有关 bottom 如何影响布局的更多详情，请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

boxSizing

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

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

---

columnGap

columnGap 的作用类似于 CSS 中的 column-gap。在 React Native 中只支持像素单位。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number	否

---

direction

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
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: <positive number> 等同于 flexGrow: <positive number>, flexShrink: 1, flexBasis: 0。

当 flex 为 0 时，组件会根据 width 和 height 定尺寸，并且不具有弹性。

当 flex 为 -1 时，组件通常会根据 width 和 height 定尺寸。不过，如果空间不足，组件会缩小到其 minWidth 和 minHeight。

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

类型	是否必需
number	否

---

flexBasis

flexBasis 是一种与轴无关的方式，用于提供项目在主轴上的默认尺寸。为子元素设置 flexBasis，类似于在其父元素是 flexDirection: row 的容器时设置该子元素的 width，或者在其父元素是 flexDirection: column 的容器时设置该子元素的 height。项目的 flexBasis 是该项目的默认尺寸，也就是在执行任何 flexGrow 和 flexShrink 计算之前的尺寸。

类型	是否必需
number, string	否

---

flexDirection

flexDirection 控制容器中的子元素沿哪些方向排列。row 表示从左到右，column 表示从上到下，而另外两个方向你应该也能猜到。它的作用类似于 CSS 中的 flex-direction，只是默认值是 column。

更多详情请参见 MDN CSS Reference。

类型	是否必需
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 Reference。

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

---

gap

gap 的作用类似于 CSS 中的 gap。在 React Native 中只支持像素单位。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number	否

---

height

height 设置该组件的高度。

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

inset

备注

inset 仅可在 新架构 中使用

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

insetBlock

备注

insetBlock 仅可在 新架构 中使用

等同于 top 和 bottom。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

insetBlockEnd

备注

insetBlockEnd 仅可在 新架构 中使用

等同于 bottom。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

insetBlockStart

备注

insetBlockStart 仅可在 新架构 中使用

等同于 top。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

insetInline

备注

insetInline 仅可在 新架构 中使用

等同于 right 和 left。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

insetInlineEnd

备注

insetInlineEnd 仅可在 新架构 中使用

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

insetInlineStart

备注

insetInlineStart 仅可在 新架构 中使用

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

isolation

备注

isolation 仅可在 新架构 中使用

isolation 允许你形成一个 stacking context。

有两个值：

• auto（默认值）：不执行任何操作。
• isolate：形成一个 stacking context。

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

---

justifyContent

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

更多详情请参见 MDN CSS Reference。

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

---

left

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

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

有关 left 如何影响布局的更多详情，请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

margin

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

marginBottom

marginBottom 的作用类似于 CSS 中的 margin-bottom。更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

marginBlock

等同于 marginVertical。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

marginBlockEnd

等同于 marginBottom。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

marginBlockStart

等同于 marginTop。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

marginEnd

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

类型	是否必需
number, string	否

---

marginHorizontal

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

类型	是否必需
number, string	否

---

marginInline

等同于 marginHorizontal。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

marginInlineEnd

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

marginInlineStart

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

marginLeft

marginLeft 的作用类似于 CSS 中的 margin-left。更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

marginRight

marginRight 的作用类似于 CSS 中的 margin-right。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

marginStart

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

类型	是否必需
number, string	否

---

marginTop

marginTop 的作用类似于 CSS 中的 margin-top。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

marginVertical

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

类型	是否必需
number, string	否

---

maxHeight

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

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

maxWidth

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

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

minHeight

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

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

minWidth

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

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

overflow

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

更多详情请参见 MDN CSS Reference。

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

---

padding

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

paddingBottom

paddingBottom 的作用类似于 CSS 中的 padding-bottom。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

paddingBlock

等同于 paddingVertical。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

paddingBlockEnd

等同于 paddingBottom。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

paddingBlockStart

等同于 paddingTop。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

paddingEnd

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

类型	是否必需
number, string	否

---

paddingHorizontal

设置 paddingHorizontal 就像同时设置 paddingLeft 和 paddingRight。

类型	是否必需
number, string	否

---

paddingInline

等同于 paddingHorizontal。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

paddingInlineEnd

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

paddingInlineStart

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

paddingLeft

paddingLeft 的作用类似于 CSS 中的 padding-left。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

paddingRight

paddingRight 的作用类似于 CSS 中的 padding-right。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

paddingStart

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

类型	是否必需
number, string	否

---

paddingTop

paddingTop 的作用类似于 CSS 中的 padding-top。

更多详情请参见 MDN CSS Reference。

类型	是否必需
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 和其他单位。

有关 right 如何影响布局的更多详情，请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

rowGap

rowGap 的作用类似于 CSS 中的 row-gap。在 React Native 中只支持像素单位。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number	否

---

start

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

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

类型	是否必需
number, string	否

---

top

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

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

有关 top 如何影响布局的更多详情，请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

width

width 设置该组件的宽度。

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

更多详情请参见 MDN CSS Reference。

类型	是否必需
number, string	否

---

zIndex

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

它的作用类似于 CSS 的 z-index 属性——zIndex 更大的组件会渲染在上层。可以把 z 方向想象成从手机指向你的眼睛。

在 iOS 上，zIndex 可能要求 View 彼此成为兄弟节点才能按预期工作。

更多详情请参见 MDN CSS Reference。

类型	是否必需
number	否