メインコンテンツにスキップ

レイアウトプロパティ

これらのプロパティに関するより詳細な例は、Flexboxによるレイアウトページにあります。

例​

次の例は、異なるプロパティがReact Nativeのレイアウトにどのように影響を与えるかを示しています。たとえば、プロパティflexWrapの値を変更しながら、UIから四角形を追加または削除してみてください。

リファレンス

プロパティ​

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ベースを持つノードでは、アスペクト比は、設定されていない場合、交差軸におけるノードのサイズを制御します
  • 測定関数を持つノードでは、アスペクト比は、測定関数が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​

方向がltrの場合、borderEndWidthはborderRightWidthと同等です。方向が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​

方向がltrの場合、borderStartWidthはborderLeftWidthと同等です。方向が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などの単位はサポートされていません。

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いいえ

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に設定されたコンポーネントの2倍のスペースを占有します。flex: <正の数>は、flexGrow: <正の数>, 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は上から下に進み、他の2つが何をするかは推測できるでしょう。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 と非常に似ており、オーバーフローしたサイズを負の残りスペースとみなせば、同じように考えることができます。これらの2つのプロパティは、子要素が必要に応じて拡大・縮小できるようにすることで、うまく連携します。

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やその他の単位はサポートされていません。

left がレイアウトにどのように影響するかについての詳細は、https://developer.mozilla.org/en-US/docs/Web/CSS/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-US/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 を参照してください。

型必須
数値, 文字列いいえ

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 は、このコンポーネントの右端をオフセットする論理ピクセル数です。

CSS の right と同様に機能しますが、React Native ではポイントまたはパーセントを使用する必要があります。em やその他の単位はサポートされていません。

right がレイアウトにどのように影響するかについての詳細は、https://developer.mozilla.org/en-US/docs/Web/CSS/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 やその他の単位はサポートされていません。

top がレイアウトにどのように影響するかについての詳細は、https://developer.mozilla.org/en-US/docs/Web/CSS/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いいえ