レイアウトと配置

フローは、レスポンシブなレイアウトを作成します。要素を特定の座標にドラッグするのではなく、コンテナの中に要素をネストして、子要素を自動的に整列させます。

コンテナは、要素の方向（縦または横）、配置、間隔を決定します。個々の要素は、サイズや余白を細かく調整したり、必要に応じて絶対位置固定位置でフローから外れることもできます。

塗りつぶし、ボーダー、エフェクトなどの視覚的なプロパティについては、スタイルと外観をご覧ください。

   </TabItem>
    <TabItem value="layout" label="レイアウト、サイズ、スペーシング">

レイアウト

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

縦方向コンテナ：子要素を上から下へ並べる
横方向コンテナ：子要素を左から右へ並べる
区切り線：要素間を視覚的に区切るセパレーター
カルーセル：横方向にスクロールできるスライドのセット
ボトムシート：ユーザーがボタンをタップしたときに追加コンテンツを表示するスライド式のオーバーレイパネルコンテナは画面の主要な構成要素です。コンテナを入れ子にすることで、複雑なレイアウトを構築できます。各コンテナには右パネルに Layout セクションがあり、子要素の配置方法を制御します。

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

スクリーンとレイヤーの階層について詳しくは、スクリーンとレイヤーをご覧ください。

方向

Free: 自動レイアウトなし。子要素は独立して配置されます（子要素が絶対配置を使用する場合に便利です）
Vertical: 子要素が上から下へ積み重なります（列の行のように）
Horizontal: 子要素が左から右へ並びます（行のアイテムのように）

要素の順序

子要素は Layers パネルに表示されている順序でレンダリングされます。縦方向のコンテナでは、リストの一番上にある項目が画面の上部に表示されます。横方向のコンテナでは、一番上の項目が左側に表示されます。要素を並び替えるには、Layers パネルでドラッグするか、Move Up や Move Down のレイヤーアクションを使用してください。

アライメント

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

配置

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

Gap （デフォルト）: 隣接する子要素間の固定ピクセル値
Space Between: 子要素が両端に広がり、間に等間隔のギャップが表示される
Space Around: 各子要素の周囲に等しいスペースが配置され、端のギャップは半分のサイズになる
Space Evenly: すべての子要素の前後および間に等しいスペースが配置される

コンテンツのクリッピング

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

位置

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

相対位置（デフォルト）

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

テキストブロック、画像、カード、ボタン、リストアイテムなど、ほとんどのコンテンツには相対位置を使用してください。

絶対位置

要素は通常のフローから切り離され、他のコンテンツに重なって表示されます。隣接する要素のレイアウトには影響しません。

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

オフセットフィールド（T、L、R、B）：親コンテナの各辺から要素までの距離をピクセル単位で設定します
アンカーグリッド：3×3グリッドのポイントをクリックして、要素が親のどのコーナー・辺・中心にアンカーするかを選択します
水平アンカー （左 / 中央 / 右）と 垂直アンカー （上 / 中央 / 下）：グリッドと同じアンカーポイントを操作するドロップダウン
Z-index：兄弟要素に対する要素の重なり順序を制御する数値フィールドです。値が大きいほど前面に表示されます装飾的なオーバーレイ、バッジ、閉じるボタン、画像上に配置するアイコンには、絶対位置指定を使用してください。

絶対配置の要素を親要素の横幅いっぱいに広げるには、水平アンカーを Left に設定し、Right オフセットに 0 を指定します。これにより、要素が両端にピン留めされます。

固定

このエレメントは親コンテナを完全に無視し、画面上に固定されます。ユーザーがスクロールしても常に表示され続け、ページのコンテンツがその下で動きます。固定位置指定は絶対位置指定と同じコントロール（オフセット、アンカーグリッド、Z-index）を使用します。すべてのオフセットは、親要素ではなく画面のセーフエリアを基準に計算されます。たとえば、下からのオフセットを0にすると、ホームインジケーターの上に要素が配置されます。物理的な画面端からオフセットを計算したい場合は、セーフエリアを無視するを有効にしてください。スクロールするコンテンツの上に浮かせたい要素（閉じるボタン、復元ボタン、常時表示のトップバナー、トップへ戻るボタン、ナビゲーションバーなど）には、固定位置を使用してください。専用のボトムアクションエリアには、代わりにフッターを使用してください。

セーフエリアを無視する

セーフエリアとは、ノッチ・ステータスバー・ホームインジケーターにかからないよう確保された画面領域のことです。デフォルトでは、配置された要素はこの領域内に収まるように制御されます。

位置タイプセレクターの下にある Ignore safe area チェックボックスをオンにすると、要素のオフセットが物理的な画面端から計測されるようになります。これにより、要素がノッチやホームインジケーターの裏側まで広がることができます。

Fixedな要素が選択された状態のポジションパネルと「Ignore safe area」チェックボックス

フルブリードのメディアを表示するには、画像または動画のポジションを Fixed に設定し、四辺すべてのオフセットを 0 にして、Ignore safe area を選択します。これでメディアが画面全体をエッジからエッジまでカバーします。

このチェックボックスは、absolute および fixed ポジションのみで使用できます。relative 要素では無効化されており、要素を Relative に戻すとこの設定はクリアされます。

サイズ調整

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

Fill: 親要素の利用可能なスペースをすべて占めるよう要素が伸長します。表示されるピクセル値は計算結果です。
Hug: コンテンツに合わせて要素が縮小します。表示されるピクセル値は計算結果です。
Fixed: 親要素やコンテンツのサイズに関係なく、指定した正確なピクセル値を使用します。絶対配置または固定配置の要素で使用できる唯一のモードです。

スペーシング

各辺のスペーシング値を個別に設定できます。

Margin：要素とその隣接要素の間のスペース。値にかかわらず、親コンテナの境界を超えることはありません。
Padding：要素の境界とそのコンテンツの間のスペース。

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

重ね合わせ順序

Position panel for an absolute element with the Z-index field set to 99

相対配置された要素同士は互いに重なりません — 各コンテナは子要素を順番に並べます。重なりが発生するのは、Absolute または Fixed 配置によって要素が通常のフローから外れた場合のみです。

要素が重なる場合、Layers パネルで後に来る兄弟要素は前の要素の上に描画されます — 後の兄弟が相対配置で、前の要素が絶対配置であっても同様です。 Absolute と Fixed 要素には、細かい制御のための Z-index フィールドがあります。値が高いほど前面に表示されます。Relative 要素には Z-index がなく、レイヤーの順序だけでスタックが決まります。

Move up と Move down のレイヤーアクションを使って要素の順序を変更できます。