Flexboxによるレイアウト
コンポーネントはFlexboxアルゴリズムを使用して子要素のレイアウトを指定できます。Flexboxは、異なる画面サイズで一貫したレイアウトを提供するように設計されています。
通常、flexDirection、alignItems、justifyContentを組み合わせて適切なレイアウトを実現します。
FlexboxはReact Nativeでもウェブの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のスペースを獲得します。
Flex Direction
flexDirection は、ノードの子要素が配置される方向を制御します。これは主軸とも呼ばれます。交差軸は主軸に垂直な軸、または折り返し線が配置される軸です。
-
column(デフォルト値) 子要素を上から下へ整列します。折り返しが有効な場合、次の行はコンテナの上部にある最初のアイテムの右側から開始されます。 -
row子要素を左から右へ整列します。折り返しが有効な場合、次の行はコンテナの左側にある最初のアイテムの下から開始されます。 -
column-reverse子要素を下から上へ整列します。折り返しが有効な場合、次の行はコンテナの下部にある最初のアイテムの右側から開始されます。 -
row-reverse子要素を右から左へ整列します。折り返しが有効な場合、次の行はコンテナの右側にある最初のアイテムの下から開始されます。
詳細についてはこちらを参照してください。
- TypeScript
- JavaScript
レイアウト方向
レイアウト direction は、階層内の子要素とテキストが配置される方向を指定します。レイアウト方向は、start と end がどの端を参照するかも影響します。デフォルトでは、React Native は LTR レイアウト方向で配置されます。このモードでは、start は左を指し、end は右を指します。
-
LTR(デフォルト値) テキストと子要素は左から右に配置されます。要素の開始に適用されるマージンとパディングは左側に適用されます。 -
RTLテキストと子要素は右から左に配置されます。要素の開始に適用されるマージンとパディングは右側に適用されます。
- TypeScript
- JavaScript
Justify Content
justifyContent は、コンテナのメイン軸内で子要素をどのように整列するかを記述します。例えば、flexDirection が row に設定されたコンテナ内で子要素を水平方向に中央揃えしたり、flexDirection が column に設定されたコンテナ内で垂直方向に中央揃えしたりするのにこのプロパティを使用できます。
-
flex-start(デフォルト値) コンテナの子要素をコンテナのメイン軸の開始位置に揃えます。 -
flex-endコンテナの子要素をコンテナのメイン軸の終了位置に揃えます。 -
centerコンテナの子要素をコンテナのメイン軸の中央に揃えます。 -
space-betweenコンテナのメイン軸に沿って子要素を均等に配置し、残りのスペースを子要素間に分配します。 -
space-aroundコンテナのメイン軸に沿って子要素を均等に配置し、残りのスペースを子要素の周囲に分配します。space-betweenと比較して、space-aroundを使用すると、最初の要素の開始と最後の要素の終わりにスペースが分配されます。 -
space-evenly配置コンテナ内で子要素を主軸に沿って均等に配置します。隣接する各アイテム間のスペース、主軸の開始端と最初のアイテム、主軸の終了端と最後のアイテムのスペースはすべて完全に同じです。
詳細についてはこちらを参照してください。
- TypeScript
- JavaScript
Align Items
alignItems は、コンテナの交差軸に沿って子要素をどのように整列するかを記述します。justifyContentと非常によく似ていますが、alignItemsは主軸ではなく交差軸に適用されます。
-
stretch(デフォルト値) コンテナの子要素を、コンテナの交差軸の高さに合わせて引き伸ばします。 -
flex-startコンテナの子要素をコンテナの交差軸の開始位置に揃えます。 -
flex-endコンテナの子要素をコンテナの交差軸の終了位置に揃えます。 -
centerコンテナの子要素をコンテナの交差軸の中央に揃えます。 -
baselineコンテナの子要素を共通のベースラインに沿って整列させます。個々の子要素は、親の参照ベースラインとして設定できます。
stretch を有効にするには、子要素が副軸に沿って固定の寸法を持たないようにする必要があります。以下の例では、width: 50 を子要素から削除するまで alignItems: stretch は何もしません。
詳細についてはこちらを参照してください。
- TypeScript
- JavaScript
Align Self
alignSelfはalignItemsと同じオプションと効果を持ちますが、コンテナ内の子要素に影響を与える代わりに、このプロパティを個々の子要素に適用して、親内でのその子要素の配置を変更できます。alignSelfは、親がalignItemsで設定したすべてのオプションを上書きします。
- TypeScript
- JavaScript
Align Content
alignContentは、交差軸に沿った行の分布を定義します。これは、アイテムがflexWrapを使用して複数行に折り返される場合にのみ効果があります。
-
flex-start(デフォルト値) 折り返された行をコンテナの交差軸の開始位置に揃えます。 -
flex-end折り返された行をコンテナの交差軸の終了位置に揃えます。 -
stretch(ウェブ上でYogaを使用する場合のデフォルト値) 折り返された行を、コンテナの交差軸の高さに合わせて引き伸ばします。 -
center折り返された行をコンテナの交差軸の中央に揃えます。 -
space-between折り返された行をコンテナの交差軸に沿って均等に配置し、残りのスペースを行間に分配します。 -
space-around折り返された行をコンテナの交差軸に沿って均等に配置し、残りのスペースを行の周囲に分配します。コンテナの両端は、アイテム間のスペースと比較して半分のサイズのスペースを持ちます。 -
space-evenly折り返された行をコンテナの交差軸に沿って均等に配置し、残りのスペースを行の周囲に分配します。各スペースは同じサイズです。
詳細についてはこちらを参照してください。
- TypeScript
- JavaScript
Flex Wrap
flexWrap プロパティはコンテナに設定され、子要素が主軸に沿ってコンテナのサイズを超過した場合の動作を制御します。デフォルトでは、子要素は強制的に単一の行に配置されます (これにより要素が縮小する可能性があります)。折り返しが許可されている場合、必要に応じてアイテムは主軸に沿って複数行に折り返されます。
行を折り返す場合、alignContent を使用して、行がコンテナ内でどのように配置されるかを指定できます。詳細についてはこちらを参照してください。
- TypeScript
- JavaScript
Flex Basis, Grow, and Shrink
-
flexBasisは、アイテムの主軸に沿ったデフォルトサイズを提供する、軸に依存しない方法です。親がflexDirection: rowのコンテナである場合、子要素のflexBasisを設定することはその子要素のwidthを設定することに似ており、親がflexDirection: columnのコンテナである場合、子要素のheightを設定することに似ています。アイテムのflexBasisは、flexGrowおよびflexShrinkの計算が実行される前の、そのアイテムのデフォルトサイズです。 -
flexGrowは、コンテナ内のスペースが主軸に沿って子要素間でどの程度分配されるべきかを記述します。子要素を配置した後、コンテナは残りのスペースを子要素によって指定された flex grow の値に従って分配します。flexGrowは 0 以上の任意の浮動小数点値を受け入れ、デフォルト値は 0 です。コンテナは、残りのスペースを子要素のflexGrow値によって重み付けして子要素に分配します。 -
flexShrinkは、子要素の合計サイズが主軸上のコンテナのサイズを超過する場合に、子要素を主軸に沿ってどのように縮小するかを記述します。flexShrinkはflexGrowと非常によく似ており、オーバーフローするサイズが負の残りのスペースと見なされる場合、同様に考えることができます。これら2つのプロパティは、必要に応じて子要素を拡大縮小させることで、うまく連携します。flexShrinkは0以上の浮動小数点値を受け入れ、デフォルト値は0です（ウェブではデフォルトは1です）。コンテナは、子要素のflexShrink値によって重み付けして子要素を縮小します。
詳細についてはこちらを参照してください。
- TypeScript
- JavaScript
行間、列間、および間隔
-
rowGapは、要素の行間のギャップ (ガター) のサイズを設定します。 -
columnGapは、要素の列間のギャップ (ガター) のサイズを設定します。 -
gapは、行と列の間のギャップ (ガター) のサイズを設定します。これはrowGapとcolumnGapの短縮形です。
flexWrap と alignContent を gap と一緒に使用して、アイテム間に一貫したスペースを追加できます。
- TypeScript
- JavaScript
幅と高さ
width プロパティは要素のコンテンツ領域の幅を指定します。同様に、height プロパティは要素のコンテンツ領域の高さを指定します。
width と height の両方で以下の値を指定できます
-
auto(デフォルト値) React Nativeは、他の子要素、テキスト、画像などのコンテンツに基づいて要素の幅/高さを計算します。 -
pixels絶対ピクセルで幅/高さを定義します。コンポーネントに設定されている他のスタイルによっては、これがノードの最終的な寸法ではない場合があります。 -
percentageそれぞれ親の幅または高さのパーセンテージで幅または高さを定義します。
- 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があること
さらに深く掘り下げる
Flexboxをよりよく理解するために利用できるインタラクティブなYogaプレイグラウンドをチェックしてください。
基本をカバーしましたが、レイアウトには他にも多くのスタイルが必要になる場合があります。レイアウトを制御するプロパティの完全なリストはこちらに文書化されています。
さらに、Wix Engineers の例も参照できます。