Flexboxを使ったレイアウト

コンポーネントは、Flexboxアルゴリズムを使用して子のレイアウトを指定できます。 Flexboxは、異なる画面サイズで一貫したレイアウトを提供するように設計されています。

通常は、flexDirection、alignItems、およびjustifyContentを組み合わせて使用​​して、適切なレイアウトを実現します。

注意

Flexboxは、React NativeではWebのCSSと同じように機能しますが、いくつかの例外があります。デフォルトが異なり、flexDirectionはrowではなくcolumn、alignContentはstretchではなくflex-start、flexShrinkは1ではなく0にデフォルト設定されており、flexパラメータは単一の数字のみをサポートします。

Flex

flexは、アイテムがメイン軸に沿って利用可能なスペースをどのように**「埋める」**かを定義します。スペースは各要素のflexプロパティに従って分割されます。

次の例では、赤、オレンジ、緑のビューはすべて、flex: 1が設定されたコンテナビューの子です。赤のビューはflex: 1、オレンジのビューはflex: 2、緑のビューはflex: 3を使用します。 **1+2+3 = 6**なので、赤のビューはスペースの1/6、オレンジは2/6、緑は3/6を取得します。

フレックス方向

flexDirectionは、ノードの子がレイアウトされる方向を制御します。これは、主軸とも呼ばれます。交差軸は主軸に垂直な軸、つまり折り返し線がレイアウトされる軸です。

• column（**デフォルト値**）子を上から下に配置します。折り返しが有効になっている場合、次の行はコンテナの上部にある最初のアイテムの右側に開始されます。

• row 子を左から右に配置します。折り返しが有効になっている場合、次の行はコンテナの左側にある最初のアイテムの下に開始されます。

• column-reverse 子を下から上に配置します。折り返しが有効になっている場合、次の行はコンテナの下部にある最初のアイテムの右側に開始されます。

• row-reverse 子を右から左に配置します。折り返しが有効になっている場合、次の行はコンテナの右側にある最初のアイテムの下に開始されます。

詳しくはこちらをご覧ください。

TypeScript

JavaScript

レイアウト方向

レイアウトdirectionは、階層内の子とテキストをレイアウトする方向を指定します。レイアウト方向は、startとendがどのエッジを参照するかも影響します。デフォルトでは、React NativeはLTRレイアウト方向でレイアウトします。このモードでは、startは左を、endは右を参照します。

• LTR（**デフォルト値**）テキストと子は左から右にレイアウトされます。要素の先頭に適用されるマージンとパディングは、左側に適用されます。

• RTL テキストと子は右から左にレイアウトされます。要素の先頭に適用されるマージンとパディングは、右側に適用されます。

TypeScript

JavaScript

justifyContent

justifyContentは、コンテナの主軸内で子をどのように配置するかを記述します。たとえば、このプロパティを使用して、flexDirectionがrowに設定されたコンテナ内で子を水平方向に中央揃えしたり、flexDirectionがcolumnに設定されたコンテナ内で垂直方向に中央揃えしたりできます。

• flex-start（**デフォルト値**）コンテナの子をコンテナの主軸の始点に配置します。

• flex-end コンテナの子をコンテナの主軸の終点に配置します。

• center コンテナの子をコンテナの主軸の中央に配置します。

• space-between コンテナの主軸全体に子を均等に配置し、残りのスペースを子の間に分配します。

• space-around コンテナの主軸全体に子を均等に配置し、残りのスペースを子の周りに分配します。 space-betweenと比較して、space-aroundを使用すると、最初の子の開始と最後の子の終わりにスペースが分配されます。

• space-evenly 配置コンテナ内で主軸に沿って子を均等に分配します。隣接するアイテムのペア間、主軸の開始エッジと最初のアイテム、主軸の終了エッジと最後のアイテムの間隔はすべてまったく同じです。

詳しくはこちらをご覧ください。

TypeScript

JavaScript

alignItems

alignItemsは、コンテナの交差軸に沿って子をどのように配置するかを記述します。 justifyContentと非常によく似ていますが、主軸に適用されるのではなく、alignItemsは交差軸に適用されます。

• stretch（**デフォルト値**）コンテナの子をコンテナの交差軸のheightと一致するようにストレッチします。

• flex-start コンテナの子をコンテナの交差軸の始点に配置します。

• flex-end コンテナの子をコンテナの交差軸の終点に配置します。

• center コンテナの子をコンテナの交差軸の中央に配置します。

• baseline コンテナの子を共通のベースラインに沿って配置します。個々の子を、親の参照ベースラインとして設定できます。

情報

stretchを有効にするには、子が副軸に沿って固定寸法を持たない必要があります。次の例では、alignItems: stretchを設定しても、子からwidth: 50が削除されるまで何も起こりません。

詳しくはこちらをご覧ください。

TypeScript

JavaScript

alignSelf

alignSelfは、alignItemsと同じオプションと効果がありますが、コンテナ内の子に影響を与える代わりに、このプロパティを単一の子に適用して、親内での配置を変更できます。 alignSelfは、親によってalignItemsで設定されたオプションをオーバーライドします。

TypeScript

JavaScript

alignContent

alignContentは、交差軸に沿った線の分布を定義します。これは、flexWrapを使用してアイテムが複数行に折り返される場合にのみ効果があります。

• flex-start (**デフォルト値**) 折り返された行をコンテナの交差軸の始点に配置します。

• flex-end 折り返された行をコンテナの交差軸の終点に配置します。

• stretch (ウェブでYogaを使用する場合の*デフォルト値*) 折り返された行をコンテナの交差軸の高さに一致するようにストレッチします。

• center 折り返された行をコンテナの交差軸の中央に配置します。

• space-between コンテナの交差軸全体に折り返された行を均等に配置し、残りのスペースを行の間に分配します。

• space-around コンテナの交差軸全体に折り返された行を均等に配置し、残りのスペースを行の周りに分配します。コンテナの両端は、アイテム間のスペースと比較して半分のサイズのスペースになります。

• space-evenly コンテナの交差軸全体に折り返された行を均等に配置し、残りのスペースを行の周りに分配します。各スペースのサイズは同じです。

詳細はこちらをご覧くださいこちら.

TypeScript

JavaScript

フレックスラップ

flexWrap プロパティはコンテナに設定され、子要素がメイン軸方向にコンテナのサイズを超えた場合の動作を制御します。デフォルトでは、子要素は単一行に強制されます（要素が縮小される場合があります）。ラッピングが許可されている場合、必要に応じてアイテムはメイン軸に沿って複数行にラップされます。

行をラップする場合、alignContent を使用して、コンテナ内での行の配置方法を指定できます。詳細はこちらをご覧くださいこちら.

TypeScript

JavaScript

フレックスベース、flexGrow、flexShrink

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

• flexGrow は、コンテナ内のスペースをメイン軸に沿って子要素間でどのように分配するかを記述します。コンテナは、子要素をレイアウトした後、子要素によって指定された flex grow 値に基づいて残りのスペースを分配します。

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

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

  flexShrink は、0 以上の任意の浮動小数点値を受け入れ、デフォルト値は 0 です（Web ではデフォルトは 1 です）。コンテナは、子要素の flexShrink 値で重み付けして子要素を縮小します。

詳細はこちらをご覧くださいこちら.

TypeScript

JavaScript

行ギャップ、列ギャップ、ギャップ

• rowGap は、要素の行間のギャップ（ガター）のサイズを設定します。

• columnGap は、要素の列間のギャップ（ガター）のサイズを設定します。

• gap は、行と列の間のギャップ（ガター）のサイズを設定します。これは rowGap と columnGap の shorthand です。

flexWrap と alignContent を gap と一緒に使用して、アイテム間に一定の間隔を追加できます。

TypeScript

JavaScript

幅と高さ

width プロパティは、要素のコンテンツ領域の幅を指定します。同様に、height プロパティは、要素のコンテンツ領域の高さを指定します。

width と height はどちらも次の値を取ることができます

• auto (デフォルト値) React Native は、他の子供、テキスト、または画像など、コンテンツに基づいて要素の幅/高さを計算します。

• ピクセル 幅/高さを絶対ピクセル単位で定義します。コンポーネントに設定されている他のスタイルによっては、これがノードの最終的な寸法にならない場合があります。

• パーセンテージ 親要素の幅または高さに対するパーセンテージで幅または高さを定義します。

TypeScript

JavaScript

位置

要素の position タイプは、それ自体、親、または包含ブロックを基準とした配置方法を定義します。

• relative (デフォルト値) デフォルトでは、要素は相対的に配置されます。これは、要素がレイアウトの通常のフローに従って配置され、top、right、bottom、left の値に基づいてその位置に対してオフセットされることを意味します。オフセットは、兄弟要素または親要素の位置には影響しません。

• `absolute` 絶対配置の場合、要素は通常のレイアウトフローに参加しません。代わりに、兄弟要素とは独立してレイアウトされます。位置は `top`、`right`、`bottom`、`left` の値に基づいて決定されます。これらの値は、包含ブロックを基準とした要素の位置を決定します。

• `static` 静的配置の場合、要素は通常のレイアウトフローに従って配置され、 `top`、 `right`、 `bottom`、 `left` の値は無視されます。また、この `position` は、他の優先するスタイルプロパティ（例： `transform`）が存在しない限り、要素が絶対的な子孫の包含ブロックを形成しないようにします。これにより、`absolute` 要素を親ではないものに配置できます。** `static` は新しいアーキテクチャでのみ使用可能です**。

TypeScript

JavaScript

包含ブロック

要素の包含ブロックは、その位置とサイズを制御する祖先要素です。React Native での包含ブロックの動作方法は、Web での動作方法と非常によく似ていますが、Web 機能の一部が不足しているため、簡略化されています。

絶対配置された要素の `top`、`right`、`bottom`、`left` の値は、その包含ブロックを基準とします。

絶対配置された要素に適用されるパーセンテージの長さ（例： `width: '50%'` または `padding: '10%'`）は、その包含ブロックのサイズを基準として計算されます。たとえば、包含ブロックの幅が 100 ポイントの場合、絶対配置された要素の `width: 50%` は 50 ポイントの幅になります。

次のリストは、任意の要素の包含ブロックを決定するのに役立ちます

• その要素の `position` タイプが `relative` または `static` の場合、その包含ブロックはその親です。
• その要素の `position` タイプが `absolute` の場合、その包含ブロックは、次のいずれかが当てはまる最も近い祖先です
  • `position` タイプが `static` 以外である
  • `transform` がある

さらに深く

フレックスボックスをより深く理解するために使用できるインタラクティブなヨガプレイグラウンドをご覧ください。

基本を説明しましたが、レイアウトには他にも多くのスタイルが必要になる場合があります。レイアウトを制御するプロパティの完全なリストはこちらに記載されています。

さらに、Wix エンジニアの例を見ることができます。