布局与定位

Flow Builder 创建的是响应式布局。你不需要将元素拖放到精确坐标——而是将它们嵌套在容器中，由容器自动排列其子元素。

容器决定元素的排列方向（垂直或水平）、对齐方式和间距。各个元素可以进一步微调自身的尺寸和外边距，或在需要时通过绝对定位或固定定位脱离正常流。

布局

布局是在屏幕上排列元素的核心工具。每个容器会按照一组规则（方向、对齐方式和间距）自动分配其子元素。编辑工具中可用的布局元素如下：

• 垂直容器：从上到下排列子元素
• 水平容器：从左到右排列子元素
• 分隔线：元素之间的视觉分隔符
• 轮播图：可水平滚动的幻灯片组
• 底部弹层：一个滑动覆盖面板，当用户点击按钮时显示额外内容 容器是屏幕的基本构建单元，可以相互嵌套来实现复杂布局。右侧面板的 Layout 部分用于控制容器内子元素的排列方式。

如需将元素归组到新容器中，可使用 Wrap 图层操作；如需移除容器并将子元素提升到上一层，则使用 Unwrap。

方向

• Free：无自动布局。子元素独立定位（适用于子元素使用绝对定位的场景）
• Vertical：子元素从上到下堆叠，如列中的行
• Horizontal：子元素从左到右排列，如行中的项目

元素顺序

子元素按照图层面板中的排列顺序渲染。在垂直容器中，列表最上方的元素显示在屏幕顶部；在水平容器中，最上方的元素显示在左侧。你可以在图层面板中拖拽元素来调整顺序，也可以使用上移和下移图层操作。

对齐方式

对齐网格控制子元素在容器交叉轴上的位置。在垂直容器中，对齐方式控制子元素的水平位置（左对齐、居中或右对齐）。在水平容器中，它控制子元素的垂直位置（顶部、居中或底部）。

分布

分布决定了子元素在主轴方向上的空间分配方式：

• Gap （默认）：相邻子元素之间的固定像素间距
• Space Between：子元素分布到两端，元素之间的间距相等
• Space Around：每个子元素两侧拥有相等的空间，但边缘处的间距为中间间距的一半
• Space Evenly：所有子元素前后及之间的空间完全相等

裁剪内容

从视觉上裁剪超出容器边界的内容。关闭此选项可允许内容溢出（例如，一个有意延伸到卡片边缘之外的徽章）。

位置

默认情况下，每个元素的位置由其容器的布局自动决定。Position 切换开关允许你将元素从正常流中脱离出来，手动设置其位置。

相对定位（默认）

元素保持在正常的布局流中，其位置由父容器的布局规则自动决定——你无法自由拖动它。可使用**外边距（Margin）**来调整相对定位元素周围的间距。

绝大多数内容都适合使用相对定位，例如文本块、图片、卡片、按钮和列表项。

绝对定位

元素脱离正常文档流，覆盖在其他内容之上，不再影响相邻元素的布局。

选择 Absolute 后，会出现以下额外控件：

• 偏移字段（T、L、R、B）：设置元素到父容器各边缘的像素距离
• 锚点网格：点击 3×3 网格上的某个点，选择元素锚定到父容器的哪个角、边或中心
• 水平锚点 （Left / Center / Right）和垂直锚点 （Top / Center / Bottom）：下拉菜单，与网格控制相同的锚点位置
• Z-index：数字输入框，控制元素相对于同级元素的层叠顺序。数值越大，元素显示越靠前 对装饰性叠加层、徽章、关闭按钮以及放置在图片上方的图标，请使用绝对定位。

固定

该元素完全忽略父容器，直接固定在屏幕上。用户滚动时它始终可见，页面内容在其下方移动。 固定定位使用与绝对定位相同的控件（偏移量、锚点网格、Z-index）。所有偏移量均相对于屏幕安全区域计算，而非相对于父元素。例如，底部偏移量为 0 时，元素会保持在 Home 指示条上方。如需从屏幕物理边缘计算偏移量，请启用忽略安全区域。 对于需要悬浮在滚动内容上方的元素，请使用固定定位，而不是为其预留空间——例如浮动的关闭或恢复按钮、顶部固定横幅、返回顶部控件以及导航栏。如果需要专用的底部操作区域，请改用 Footer。

忽略安全区域

安全区域是屏幕上避开刘海、状态栏和主屏指示器的区域。默认情况下，定位元素会保持在安全区域内。

勾选位置类型选择器下方的 Ignore safe area 复选框，可将元素的偏移量改为从物理屏幕边缘开始计算。元素将可延伸至刘海和主屏指示器后面。

使用以下方法实现全屏媒体效果：将图片或视频定位方式设置为 Fixed，将四个偏移量均设为 0，并勾选 Ignore safe area。这样，媒体内容将覆盖整个屏幕，延伸至每一条边缘。

该复选框仅适用于绝对定位和固定定位。对于相对定位的元素，该选项不可用；将元素切换回 Relative 后，该设置也会自动清除。

尺寸

每个元素都有 Width 和 Height 控件。点击下拉菜单可选择尺寸模式：

• Fill：元素会拉伸以占满父容器中所有可用空间。显示的像素值为计算结果。
• Hug：元素会收缩以适应其内容。显示的像素值为计算结果。
• Fixed：元素使用你指定的精确像素值，与父容器或内容大小无关。这是绝对定位或固定定位元素的唯一可用模式。

间距

可以为元素的每一侧分别设置间距值。

• Margin：元素与相邻元素之间的空间。无论设置多大，都不会超出父容器的边界。
• Padding：元素边界与其内容之间的空间。

文本元素只有 Margin，屏幕只有 Padding，容器及其他包含子内容的元素则两者皆可使用。

堆叠顺序

相对定位的元素不会相互重叠——每个容器按顺序排列其子元素。只有当某个元素通过绝对或固定定位脱离正常文档流时，才会产生重叠。

当元素发生重叠时，在 Layers 面板中排列靠后的兄弟元素会渲染在靠前的元素上方——即使靠后的元素是相对定位，靠前的元素是绝对定位也是如此。 Absolute 和 Fixed 元素有 Z-index 字段用于精细控制：数值越大优先级越高。Relative 元素没有 Z-index——仅通过图层顺序决定其层叠关系。

使用 Move up 和 Move down 图层操作 来调整元素顺序。