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

レイアウトProps

これらのプロパティに関するより詳細な例は、Flexbox を使用したレイアウトのページで見つけることができます。

使用例​

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

リファレンス

Props​

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 basis が設定されているノードでは、アスペクト比が未設定の場合にノードのクロス軸のサイズを制御します。
  • measure 関数を持つノードでは、measure 関数が flex basis を測定するかのようにアスペクト比が機能します。
  • flex grow/shrink を持つノードでは、アスペクト比が未設定の場合にノードのクロス軸のサイズを制御します。
  • アスペクト比は最小/最大寸法を考慮します。
型必須
数値、文字列いいえ

borderBottomWidth​

borderBottomWidth は CSS の border-bottom-width と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width を参照してください。

型必須
数値いいえ

borderEndWidth​

方向が ltr の場合、borderEndWidth は borderRightWidth と同じです。方向が rtl の場合、borderEndWidth は borderLeftWidth と同じです。

型必須
数値いいえ

borderLeftWidth​

borderLeftWidth は CSS の border-left-width と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width を参照してください。

型必須
数値いいえ

borderRightWidth​

borderRightWidth は CSS の border-right-width と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width を参照してください。

型必須
数値いいえ

borderStartWidth​

方向が ltr の場合、borderStartWidth は borderLeftWidth と同じです。方向が rtl の場合、borderStartWidth は borderRightWidth と同じです。

型必須
数値いいえ

borderTopWidth​

borderTopWidth は CSS の border-top-width と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width を参照してください。

型必須
数値いいえ

borderWidth​

borderWidth は CSS の border-width と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/border-width を参照してください。

型必須
数値いいえ

bottom​

bottom は、このコンポーネントの下端をオフセットする論理ピクセル数です。

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

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

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

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 を参照してください。

型必須
数値いいえ

direction​

direction は、ユーザーインターフェースの方向フローを指定します。ルートノードを除いて、デフォルトは inherit であり、ルートノードは現在のロケールに基づいて値が決定されます。詳細については、https://www.yogalayout.dev/docs/styling/layout-direction を参照してください。

型必須プラットフォーム
enum('inherit', 'ltr', 'rtl')いいえiOS

display​

display はこのコンポーネントの表示タイプを設定します。

これは CSS の display と同様に動作しますが、'flex'、'none'、'contents' の値のみをサポートしています。デフォルトは flex です。

型必須
enum('none', 'flex', 'contents')いいえ

end​

方向が ltr の場合、end は right と同じです。方向が rtl の場合、end は left と同じです。

このスタイルは left および right スタイルよりも優先されます。

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

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 と同じように動作します。

型必須
数値いいえ

flexBasis​

flexBasis は、メイン軸に沿った項目のデフォルトサイズを提供する、軸に依存しない方法です。子の flexBasis を設定することは、親が flexDirection: row のコンテナである場合にその子の width を設定すること、または親が flexDirection: column のコンテナである場合にその子の height を設定することに似ています。項目の flexBasis は、その項目のデフォルトサイズであり、flexGrow と flexShrink の計算が実行される前の項目のサイズです。

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

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 は、コンテナ内のスペースをメイン軸に沿って子間でどのように分配するかを記述します。子をレイアウトした後、コンテナは残りのスペースを子の flexGrow 値に従って分配します。

flexGrow は 0 以上の任意の浮動小数点値を受け入れ、デフォルト値は 0 です。コンテナは、子の flexGrow 値によって重み付けされた残りのスペースを子間で分配します。

型必須
数値いいえ

flexShrink​

flexShrink は、子の合計サイズがメイン軸上のコンテナのサイズを超過した場合に、メイン軸に沿って子を縮小する方法を記述します。flexShrink は flexGrow と非常によく似ており、溢れたサイズが負の残りのスペースと見なされる場合、同様に考えることができます。これらの2つのプロパティは、必要に応じて子を拡大縮小させることでうまく機能します。

flexShrink は 0 以上の任意の浮動小数点値を受け入れ、デフォルト値は 0 です。コンテナは、子の flexShrink 値によって重み付けされた子を縮小します。

型必須
数値いいえ

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 を参照してください。

型必須
数値いいえ

height​

height はこのコンポーネントの高さを設定します。

これは CSS の height と同様に動作しますが、React Native ではポイントまたはパーセンテージを使用する必要があります。Ems やその他の単位はサポートされていません。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/height を参照してください。

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

isolation​

isolation を使用すると、スタッキングコンテキストを形成できます。このプロパティは新しいアーキテクチャでのみ利用可能です。

値は2つあります。

  • auto (デフォルト): 何も行いません。
  • isolate: スタッキングコンテキストを形成します。
型必須
enum('auto', 'isolate')いいえ

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 ではポイントまたはパーセンテージを使用する必要があります。Ems やその他の単位はサポートされていません。

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

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

margin​

margin を設定することは、marginTop、marginLeft、marginBottom、marginRight のそれぞれを設定するのと同じ効果があります。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/margin を参照してください。

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

marginBottom​

marginBottom は CSS の margin-bottom と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom を参照してください。

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

marginEnd​

方向が ltr の場合、marginEnd は marginRight と同じです。方向が rtl の場合、marginEnd は marginLeft と同じです。

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

marginHorizontal​

marginHorizontal を設定することは、marginLeft と marginRight の両方を設定するのと同じ効果があります。

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

marginLeft​

marginLeft は CSS の margin-left と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left を参照してください。

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

marginRight​

marginRight は CSS の margin-right と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right を参照してください。

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

marginStart​

方向が ltr の場合、marginStart は marginLeft と同じです。方向が rtl の場合、marginStart は marginRight と同じです。

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

marginTop​

marginTop は CSS の margin-top と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top を参照してください。

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

marginVertical​

marginVertical を設定することは、marginTop と marginBottom の両方を設定するのと同じ効果があります。

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

maxHeight​

maxHeight は、このコンポーネントの最大高さ（論理ピクセル単位）です。

これは CSS の max-height と同様に動作しますが、React Native ではポイントまたはパーセンテージを使用する必要があります。Ems やその他の単位はサポートされていません。

詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/max-height を参照してください。

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

maxWidth​

maxWidth は、このコンポーネントの最大幅（論理ピクセル単位）です。

これは CSS の max-width と同様に動作しますが、React Native ではポイントまたはパーセンテージを使用する必要があります。Ems やその他の単位はサポートされていません。

詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/max-width を参照してください。

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

minHeight​

minHeight は、このコンポーネントの最小高さ（論理ピクセル単位）です。

これは CSS の min-height と同様に動作しますが、React Native ではポイントまたはパーセンテージを使用する必要があります。Ems やその他の単位はサポートされていません。

詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/min-height を参照してください。

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

minWidth​

minWidth は、このコンポーネントの最小幅（論理ピクセル単位）です。

これは CSS の min-width と同様に動作しますが、React Native ではポイントまたはパーセンテージを使用する必要があります。Ems やその他の単位はサポートされていません。

詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/min-width を参照してください。

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

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 を参照してください。

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

paddingBottom​

paddingBottom は CSS の padding-bottom と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom を参照してください。

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

paddingEnd​

方向が ltr の場合、paddingEnd は paddingRight と同じです。方向が rtl の場合、paddingEnd は paddingLeft と同じです。

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

paddingHorizontal​

paddingHorizontal を設定することは、paddingLeft と paddingRight の両方を設定するのと同じです。

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

paddingLeft​

paddingLeft は CSS の padding-left と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left を参照してください。

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

paddingRight​

paddingRight は CSS の padding-right と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right を参照してください。

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

paddingStart​

方向が ltr の場合、paddingStart は paddingLeft と同じです。方向が rtl の場合、paddingStart は paddingRight と同じです。

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

paddingTop​

paddingTop は CSS の padding-top と同じように動作します。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top を参照してください。

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

paddingVertical​

paddingVertical を設定することは、paddingTop と paddingBottom の両方を設定するのと同じです。

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

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 ではポイントまたはパーセンテージを使用する必要があります。Ems やその他の単位はサポートされていません。

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

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

rowGap​

rowGap は CSS の row-gap と同じように動作します。React Native ではピクセル単位のみがサポートされています。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap を参照してください。

型必須
数値いいえ

start​

方向が ltr の場合、start は left と同じです。方向が rtl の場合、start は right と同じです。

このスタイルは left、right、end のスタイルよりも優先されます。

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

top​

top は、このコンポーネントの上端をオフセットする論理ピクセル数です。

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

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

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

width​

width はこのコンポーネントの幅を設定します。

これは CSS の width と同様に動作しますが、React Native ではポイントまたはパーセンテージを使用する必要があります。Ems やその他の単位はサポートされていません。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/width を参照してください。

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

zIndex​

zIndex は、どのコンポーネントが他のコンポーネントの上に表示されるかを制御します。通常、zIndex は使用しません。コンポーネントはドキュメントツリーでの順序に従って描画されるため、後続のコンポーネントが先行のコンポーネントの上に描画されます。この動作を望まないアニメーションやカスタムモーダルインターフェースがある場合に zIndex が役立つことがあります。

これは CSS の z-index プロパティと同じように動作し、zIndex の値が大きいコンポーネントほど上に描画されます。z方向は、電話からあなたの目に向かって伸びていると考えてください。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/z-index を参照してください。

iOS では、zIndex が期待通りに動作するには、View が互いに兄弟関係である必要がある場合があります。

型必須
数値いいえ