布局属性
更多关于这些属性的详细示例可以在Flexbox 布局页面上找到。
示例
以下示例展示了不同属性如何影响或塑造 React Native 布局。您可以尝试添加或删除 UI 中的正方形,同时更改属性flexWrap
的值。
- TypeScript
- JavaScript
文档
属性
alignContent
alignContent
控制行在交叉轴上的对齐方式,会覆盖父级元素设置的alignContent
属性。访问 https://developer.mozilla.org/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://developer.mozilla.org/en-US/docs/Web/CSS/align-items
类型 | 必需 |
---|---|
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | 否 |
alignSelf
alignSelf
控制子元素在纵向上的对齐方式,会覆盖父元素的 alignItems
属性。其作用类似于 CSS 中的align-self
(默认值:auto)。详情请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-self
类型 | 必需 |
---|---|
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | 否 |
aspectRatio
长宽比控制了节点未定义维度的尺寸。详情请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
- 对于设置了宽度/高度的节点,长宽比控制着未设置尺寸的一边大小。
- 对于设置了 flex 值的节点,若未设置其在交叉轴方向的尺寸,长宽比决定着该节点沿交叉轴的尺寸。
- 若节点使用了测量函数,长宽比将视同测量函数测量了 flex 值。
- 对于设置了 flex grow/shrink 的节点,若其在交叉轴方向的尺寸未设置,长宽比将决定该尺寸。
- 长宽比同时考虑了最小/最大尺寸约束 。
类型 | 必需 |
---|---|
number, string | 否 |
borderBottomWidth
borderBottomWidth 与 CSS 中的 border-bottom-width 属性作用相同。详情请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-bottom-width
类型 | 必需 |
---|---|
number | 否 |
borderEndWidth
当方向为 ltr
时,borderEndWidth
等同于 borderRightWidth
。当方向为 rtl
时,borderEndWidth
等同于 borderLeftWidth
。
类型 | 必需 |
---|---|
number | 否 |
borderLeftWidth
borderLeftWidth
的作用类似于 CSS 中的 border-left-width
。详情请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-left-width
类型 | 必需 |
---|---|
number | 否 |
borderRightWidth
borderRightWidth
的作用与 CSS 中的 border-right-width
属性类似。详情请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-right-width
类型 | 必需 |
---|---|
number | 否 |
borderStartWidth
当方向为 ltr
时,borderStartWidth
相当于 borderLeftWidth
。当方向为 rtl
时,borderStartWidth
相当于 borderRightWidth
。
类型 | 必需 |
---|---|
number | 否 |
borderTopWidth
borderTopWidth
的作用类似于 CSS 中的 border-top-width
。详情请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-top-width
类型 | 必需 |
---|---|
number | 否 |
borderWidth
borderWidth
的作用类似于 CSS 中的 border-width
。详情请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-width
类型 | 必需 |
---|---|
number | 否 |
bottom
bottom
是指将此组件底部边缘向下偏移的逻辑像素数。
它与 CSS 中的 bottom
类似,但在 React Native 中,您必须使用点或百分比。不支持 em 和其他单位。
有关 bottom
如何影响布局的更多详细信息,请参见 https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
类型 | 必需 |
---|---|
number, string | 否 |
columnGap
columnGap
的作用类似于 CSS 中的 column-gap
。在 React Native 中仅支持像素单位。有关更多详细信息,请查看 https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap。
类型 | 必需 |
---|---|
number | 否 |