フロービルダーはレスポンシブなレイアウトを作成します。要素を正確な座標にドラッグする必要はありません。代わりに、子要素を自動的に整列させるコンテナの中に要素をネストします。

コンテナが要素の方向（縦または横）、配置、スペーシングを決定します。個々の要素はサイズやマージンを微調整できます。また、必要に応じて絶対配置や固定配置でフローから外れることもできます。

レイアウト

レイアウトは画面上に要素を配置するための主要なツールです。各コンテナは、方向、配置、スペーシングのルールに従って子要素を自動的に分配します。ビルダーで利用できるレイアウト要素は次のとおりです。

• 縦コンテナ：子要素を上から下に並べる
• 横コンテナ：子要素を左から右に並べる
• ディバイダー：要素間の視覚的な区切り線
• カルーセル：横スクロール可能なスライドセット
• ボトムシート：ユーザーがボタンをタップすると追加コンテンツを表示するスライドオーバーレイパネル

コンテナは画面の主要な構成要素です。コンテナ同士をネストして複雑なレイアウトを構築できます。各コンテナには、子要素の分配方法を制御するレイアウトセクションが右パネルにあります。

要素を新しいコンテナにグループ化するには、Wrapレイヤーアクションを使用します。コンテナを削除して子要素を昇格させるには、Unwrapを使用します。

方向

• フリー：自動レイアウトなし。子要素は独立して配置されます（子要素が絶対配置を使用する場合に便利）
• 縦：子要素がカラムの行のように上から下に積み重なる
• 横：子要素が行のアイテムのように左から右に並ぶ

要素の順序

子要素はレイヤーパネルに表示される順序でレンダリングされます。縦コンテナでは、リストの先頭アイテムが画面の上部に表示されます。横コンテナでは、先頭アイテムが左側に表示されます。レイヤーパネルで要素をドラッグして並び替えるか、Move UpまたはMove Downレイヤーアクションを使用します。

配置

配置グリッドは、コンテナのクロス軸に沿って子要素が配置される位置を制御します。縦コンテナでは、配置によって子要素の水平方向の位置（左、中央、右）が制御されます。横コンテナでは、垂直方向の位置（上、中央、下）が制御されます。

分配

分配は、メイン軸に沿って子要素間のスペースをどのように分割するかを決定します。

• ギャップ （デフォルト）：隣接する子要素間の固定ピクセル値
• スペース ビトウィーン：子要素がエッジに広がり、要素間に等間隔のギャップが入る
• スペース アラウンド：各子要素の周囲に等間隔のスペースが入り、エッジには半分サイズのギャップが入る
• スペース イーブンリー：すべての子要素の前後および間に等間隔のスペースが入る

コンテンツのクリップ

コンテナの境界を超えてはみ出すコンテンツを視覚的にクリップします。これを無効にするとオーバーフローが許可されます（例：カードのエッジを意図的にはみ出すバッジなど）。

ポジション

デフォルトでは、各要素の位置はコンテナのレイアウトによって自動的に決まります。ポジショントグルを使うと、通常のフローから外れて手動で位置を指定できます。

相対（デフォルト）

要素は通常のレイアウトフロー内にとどまります。位置は親コンテナのレイアウトルールによって自動的に決まり、自由にドラッグすることはできません。相対要素の周囲のスペースを調整するにはマージンを使用します。

テキストブロック、画像、カード、ボタン、リストアイテムなど、ほぼすべてのコンテンツに相対配置を使用します。

絶対

要素が通常のフローから外れ、他のコンテンツの上にオーバーレイされます。隣接する要素のレイアウトには影響しなくなります。

絶対を選択すると、追加のコントロールが表示されます。

• オフセットフィールド（T、L、R、B）：要素から親コンテナの各エッジまでの距離をピクセルで設定
• アンカーグリッド：3×3グリッドの点をクリックして、要素がアンカーされる親のコーナー、エッジ、または中央を選択
• 水平アンカー （左 / 中央 / 右）と垂直アンカー （上 / 中央 / 下）：グリッドと同じアンカーポイントを制御するドロップダウン
• Z インデックス：兄弟要素に対するスタッキングオーダーを制御する数値フィールド。値が大きいほど上に表示される

デコラティブオーバーレイ、バッジ、閉じるボタン、画像の上に配置するアイコンには絶対配置を使用します。

固定

要素は親コンテナを完全に無視し、デバイスのビューポートに固定されます。ユーザーがスクロールしても表示され続け、ページコンテンツがその下を動きます。

固定配置は絶対配置と同じコントロール（オフセット、アンカーグリッド、Zインデックス）を使用します。すべてのオフセットは親ではなく画面のエッジを基準にします。

下部のスティッキーボタン、フローティングナビゲーションバー、固定ヘッダーには固定配置を使用します。

サイズ設定

各要素には幅と高さのコントロールがあります。ドロップダウンをクリックしてサイズモードを選択します。

• フィル：要素が親の利用可能なスペースをすべて占めるように伸びる。表示されるピクセル値は計算結果です。
• ハグ：要素がコンテンツに合わせて縮む。表示されるピクセル値は計算結果です。
• 固定：親やコンテンツのサイズに関わらず、指定した正確なピクセル値を使用する。絶対配置または固定配置の要素で唯一利用可能なモードです。

スペーシング

要素の各辺ごとにスペーシング値を個別に設定します。

• マージン：要素と隣接要素の間のスペース。値に関わらず、親コンテナの境界を超えて広がることはありません。
• パディング：要素の境界とそのコンテンツの間のスペース。

テキスト要素はマージンのみ持ちます。スクリーンはパディングのみ持ちます。コンテナや子コンテンツを持つその他の要素では両方が利用できます。

スタッキングオーダー

相対要素は互いに重なりません。各コンテナは子要素を順番に配置します。要素が絶対または固定配置で通常のフローから外れた場合にのみ重なりが発生します。

要素が重なる場合、レイヤーパネルで後に来る兄弟要素が前の要素の上にレンダリングされます。後の兄弟が相対配置で前の兄弟が絶対配置であっても同様です。

絶対および固定要素には、より細かい制御のためのZインデックスフィールドがあります。値が大きい方が上に表示されます。相対要素にはZインデックスがなく、レイヤーの順序のみでスタックが決まります。

要素の順序を変更するには、Move upおよびMove downレイヤーアクションを使用します。