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 轴层级），但所有偏移量均相对于屏幕边缘而非父元素。

适用场景：底部悬浮按钮、浮动导航栏以及常驻顶部标题栏。

尺寸

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

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

间距

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

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

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

堆叠顺序

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

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

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