Columns

このノードは、ギャップを持つカラムでコンテンツをレイアウトするために使用されます。

Columnsノードは、独自のスタイリングを持たず、代わりにレイアウト文字列を使用して、すべての子を動的レイアウトに配置します。

レイアウト文字列

レイアウト文字列は、単に数字の間にスペースがある文字列です。各数字はコンテナ全体の幅の一部を表し、列に変換されます。レイアウト文字列1 2 1を持つColumnsノードが5つの子を含む場合、次のようにレンダリングされます：

レスポンシブレイアウト

最小カラム幅値を使用する

カラムをレスポンシブにする最も簡単な方法は、最小カラム幅値を設定することです。これにより、指定されたレイアウト文字列でカラムが収まるかどうかがチェックされます。コンテナが最小幅でカラムを収容できない場合、レイアウトはより少ないカラムを持つグリッドに折りたたまれます。

渡す子要素が親の100%の幅に設定されていることを確認してください。

異なるレイアウト文字列を使用する

StatesノードとMedia Queriesプリファブを使用して、異なる値をレイアウト文字列入力に渡すことにより、高度なレスポンシブレイアウトを簡単に作成できます。

渡す子要素が親の100%の幅に設定されていることを確認してください。

入力

データ	説明
レイアウト文字列	子がレンダリングされるカラムのサイズとレイアウトを決定します。
水平方向のギャップ	カラム間の水平方向のスペース（px単位）。
垂直方向のギャップ	カラム間の垂直方向のスペース（px単位）。
レイアウト方向	カラムが水平方向または垂直方向にレンダリングされるかどうか。
最小カラム幅	より少ないカラムを持つレイアウトに折りたたまれる前に、カラムが許可される最小のサイズ。
マウントされた	Columnsノードがアプリにレンダリングされるかどうか。
コンテンツの配置	未満の行における子の位置。