版面配置屬性

關於這些屬性的更詳細範例，請參閱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/en-US/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 基準的節點上，如果未設定，長寬比控制交叉軸方向節點的大小
在具有 measure 函式的節點上，長寬比的作用如同 measure 函式測量 flex 基準
在具有 flex grow/shrink 的節點上，如果未設定，長寬比控制交叉軸方向節點的大小
長寬比會將最小/最大維度納入考量

類型	是否必填
number, string	否

`borderBottomWidth`

borderBottomWidth 的運作方式類似於 CSS 中的 border-bottom-width。請參閱 https://developer.mozilla.org/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://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width 以了解更多詳細資訊。

類型	是否必填
number	否

`borderRightWidth`

borderRightWidth 的運作方式類似於 CSS 中的 border-right-width。請參閱 https://developer.mozilla.org/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://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width 以了解更多詳細資訊。

類型	是否必填
number	否

`borderWidth`

borderWidth 的運作方式類似於 CSS 中的 border-width。請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/border-width 以了解更多詳細資訊。

類型	是否必填
number	否

`bottom`

bottom 是從此組件的底部邊緣偏移的邏輯像素數量。

它的運作方式與 CSS 中的 bottom 類似，但在 React Native 中，您必須使用點或百分比。不支援 em 和其他單位。

請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/bottom 以了解 bottom 如何影響版面配置的更多詳細資訊。

類型	是否必填
number, string	否

`boxSizing`

boxSizing 定義元素的各種尺寸屬性 (width、height、minWidth、minHeight 等) 的計算方式。如果 boxSizing 為 border-box，這些尺寸會套用至元素的邊框盒。如果為 content-box，則會套用至元素的內容盒。預設值為 border-box。如果您想了解更多關於此屬性如何運作的資訊，網頁文件是一個很好的資訊來源。

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

`columnGap`

columnGap 的運作方式類似於 CSS 中的 column-gap。在 React Native 中僅支援像素單位。請參閱 https://developer.mozilla.org/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`

當方向為 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 類似於設定該子元素的 width (如果其父容器具有 flexDirection: row) 或設定子元素的 height (如果其父容器具有 flexDirection: column)。項目的 flexBasis 是該項目的預設大小，也就是在執行任何 flexGrow 和 flexShrink 計算之前，項目的大小。

類型	是否必填
number, string	否

`flexDirection`

flexDirection 控制容器的子元素朝哪個方向流動。row 從左到右，column 從上到下，您或許可以猜到其他兩個選項的作用。它的運作方式類似於 CSS 中的 flex-direction，但預設值為 column。請參閱 https://developer.mozilla.org/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 控制子元素在到達彈性容器末端後是否可以換行。它的運作方式類似於 CSS 中的 flex-wrap (預設值：nowrap)。請參閱 https://developer.mozilla.org/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://developer.mozilla.org/en-US/docs/Web/CSS/gap 以了解更多詳細資訊。

類型	是否必填
number	否

`height`

height 設定此組件的高度。

它的運作方式與 CSS 中的 height 類似，但在 React Native 中，您必須使用點或百分比。不支援 em 和其他單位。請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/height 以了解更多詳細資訊。

類型	是否必填
number, string	否

`justifyContent`

justifyContent 在主軸方向對齊子元素。例如，如果子元素是垂直流動的，justifyContent 控制它們如何垂直對齊。它的運作方式類似於 CSS 中的 justify-content (預設值：flex-start)。請參閱 https://developer.mozilla.org/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 中，您必須使用點或百分比。不支援 em 和其他單位。

請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/left 以了解 left 如何影響版面配置的更多詳細資訊。

類型	是否必填
number, string	否

`margin`

設定 margin 的效果與分別設定 marginTop、marginLeft、marginBottom 和 marginRight 相同。請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/margin 以了解更多詳細資訊。

類型	是否必填
number, string	否

`marginBottom`

marginBottom 的運作方式類似於 CSS 中的 margin-bottom。請參閱 https://developer.mozilla.org/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://developer.mozilla.org/en-US/docs/Web/CSS/margin-left 以了解更多詳細資訊。

類型	是否必填
number, string	否

`marginRight`

marginRight 的運作方式類似於 CSS 中的 margin-right。請參閱 https://developer.mozilla.org/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://developer.mozilla.org/en-US/docs/Web/CSS/margin-top 以了解更多詳細資訊。

類型	是否必填
number, string	否

`marginVertical`

設定 marginVertical 的效果與同時設定 marginTop 和 marginBottom 相同。

類型	是否必填
number, string	否

`maxHeight`

maxHeight 是此組件的最大高度，以邏輯像素為單位。

它的運作方式與 CSS 中的 max-height 類似，但在 React Native 中，您必須使用點或百分比。不支援 em 和其他單位。

請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/max-height 以了解更多詳細資訊。

類型	是否必填
number, string	否

`maxWidth`

maxWidth 是此組件的最大寬度，以邏輯像素為單位。

它的運作方式與 CSS 中的 max-width 類似，但在 React Native 中，您必須使用點或百分比。不支援 em 和其他單位。

請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/max-width 以了解更多詳細資訊。

類型	是否必填
number, string	否

`minHeight`

minHeight 是此組件的最小高度，以邏輯像素為單位。

它的運作方式與 CSS 中的 min-height 類似，但在 React Native 中，您必須使用點或百分比。不支援 em 和其他單位。

請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/min-height 以了解更多詳細資訊。

類型	是否必填
number, string	否

`minWidth`

minWidth 是此組件的最小寬度，以邏輯像素為單位。

它的運作方式與 CSS 中的 min-width 類似，但在 React Native 中，您必須使用點或百分比。不支援 em 和其他單位。

請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/min-width 以了解更多詳細資訊。

類型	是否必填
number, string	否

`overflow`

overflow 控制子元素的測量和顯示方式。overflow: hidden 會導致視圖被裁剪，而 overflow: scroll 會導致視圖獨立於其父元素的主軸進行測量。它的運作方式類似於 CSS 中的 overflow (預設值：visible)。請參閱 https://developer.mozilla.org/en/docs/Web/CSS/overflow 以了解更多詳細資訊。

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

`padding`

設定 padding 的效果與分別設定 paddingTop、paddingBottom、paddingLeft 和 paddingRight 相同。請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/padding 以了解更多詳細資訊。

類型	是否必填
number, string	否

`paddingBottom`

paddingBottom 的運作方式類似於 CSS 中的 padding-bottom。請參閱 https://developer.mozilla.org/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://developer.mozilla.org/en-US/docs/Web/CSS/padding-left 以了解更多詳細資訊。

類型	是否必填
number, string	否

`paddingRight`

paddingRight 的運作方式類似於 CSS 中的 padding-right。請參閱 https://developer.mozilla.org/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://developer.mozilla.org/en-US/docs/Web/CSS/padding-top 以了解更多詳細資訊。

類型	是否必填
number, ,string	否

`paddingVertical`

設定 paddingVertical 類似於同時設定 paddingTop 和 paddingBottom。

類型	是否必填
number, string	否

`position`

React Native 中的 position 類似於常規 CSS，但所有項目預設都設定為 relative。

relative 將根據版面配置的正常流動定位元素。內邊距 (top、bottom、left、right) 將相對於此版面配置偏移。

absolute 將元素從版面配置的正常流動中取出。內邊距將相對於其包含區塊偏移。

static 將根據版面配置的正常流動定位元素。內邊距將不起作用。static 元素不會為絕對後代形成包含區塊。

如需更多資訊，請參閱Flexbox 版面配置文件。此外，Yoga 文件有關於 React Native 和 CSS 之間 position 差異的更多詳細資訊。

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

`right`

right 是從此組件的右邊緣偏移的邏輯像素數量。

它的運作方式與 CSS 中的 right 類似，但在 React Native 中，您必須使用點或百分比。不支援 em 和其他單位。

請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/right 以了解 right 如何影響版面配置的更多詳細資訊。

類型	是否必填
number, string	否

`rowGap`

rowGap 的運作方式類似於 CSS 中的 row-gap。在 React Native 中僅支援像素單位。請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap 以了解更多詳細資訊。

類型	是否必填
number	否

`start`

當方向為 ltr 時，start 相當於 left。當方向為 rtl 時，start 相當於 right。

此樣式優先於 left、right 和 end 樣式。

類型	是否必填
number, string	否

`top`

top 是從此組件的頂部邊緣偏移的邏輯像素數量。

它的運作方式與 CSS 中的 top 類似，但在 React Native 中，您必須使用點或百分比。不支援 em 和其他單位。

請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/top 以了解 top 如何影響版面配置的更多詳細資訊。

類型	是否必填
number, string	否

`width`

width 設定此組件的寬度。

它的運作方式與 CSS 中的 width 類似，但在 React Native 中，您必須使用點或百分比。不支援 em 和其他單位。請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/width 以了解更多詳細資訊。

類型	是否必填
number, string	否

`zIndex`

zIndex 控制哪些組件顯示在其他組件之上。通常，您不會使用 zIndex。組件根據它們在文件樹中的順序呈現，因此後面的組件會繪製在先前的組件之上。如果您有動畫或自訂模態介面，而您不想要這種行為，則 zIndex 可能很有用。

它的運作方式類似於 CSS z-index 屬性 - 具有較大 zIndex 的組件將在頂部呈現。將 z 方向想像成從手機指向您的眼球。請參閱 https://developer.mozilla.org/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​

範例

屬性