# 容器（页面组件）
# 功能简介
容器组件是页面设计器中的核心布局工具，可理解为页面元素的 “智能收纳盒”。它能够将文本、按钮、表单、数据卡片等各类页面元素 “包裹” 起来，通过预设的布局规则实现元素的有序排列，帮助开发者快速构建整洁、规范的页面结构。当前其关键能力包含：
- 简化布局设计： 无需手动计算元素位置，通过容器统一管理子元素布局，降低页面结构设计难度
- 支持多布局模式： 内置 Block 布局和 Flex 布局两种主流模式，适配不同的页面排版需求
# 使用场景
容器组件适用于各类页面布局设计场景，尤其在以下场景中能显著提升开发效率：
- 复杂表单布局： 当表单包含多个字段组（如基础信息、联系方式、业务数据等）时，可通过容器组件对字段进行分组收纳，配合布局设置实现字段组内的有序排列，避免页面杂乱。
- 数据卡片组合展示： 在数据看板、首页等页面中，需展示多个数据卡片（如销售额统计、用户增长趋势、任务进度等）时，使用容器组件可将卡片整齐排列，支持灵活调整卡片间距和对齐方式。
- 响应式页面开发： 针对需要适配 PC、平板、手机等多设备的页面，通过容器组件的布局设置（如 Flex 布局的伸缩比例），可实现元素在不同屏幕尺寸下的自动调整（如大屏横向排列、小屏纵向堆叠）。
# 使用说明
- 添加容器组件： 进入页面设计器编辑界面，在左侧组件面板中找到 “容器组件”，拖拽至页面画布的目标位置
- 进入编辑模式： 点击画布中的容器组件，右侧会显示 “容器设置” 面板，同时组件边框会出现编辑标识（线框、拖拽点），表示已进入容器编辑状态。
- 添加子元素： 在容器编辑状态下，可直接从左侧组件面板拖拽其他组件（如文本、输入框、按钮等）至容器内，或者将页面其他位置的组件拖拽到容器内（拖动组件到容器中，需要点击组件左上角的拖拽图标），子元素会自动遵循容器的布局规则排列。
# 属性说明
# 布局方式
容器支持切换 Block 布局和 Flex 布局两种布局模式：
- Block布局（块级布局）： 主要用于垂直方向的布局
- Flex布局（弹性布局）： 适合响应式的页面和复杂元素布局
# Block 布局（块级布局）
Block 布局是容器组件的基础布局模式，核心特点是元素垂直堆叠排列，适用于简单的单列布局或分组场景。
- 布局特点： 容器内的子元素会按照添加顺序从上到下垂直排列，每个子元素独占一行（默认宽度占满容器宽度）；子元素的高度由自身内容决定，无需手动设置宽度。
- 适用场景： 表单字段分组、文章段落展示、步骤流程说明等单列布局场景
- 设置项： 在容器 “布局设置” 中选择 “Block 布局” 后，可配置“溢出规则（子元素超出容器后的规则）”为“直接截断”或“显示滚动条”；容器组件可配置尺寸、间距、边框、背景等基础设置
# Flex 布局（弹性布局）
Flex 布局（弹性布局）是容器组件的高级布局模式，支持灵活的水平 / 垂直排列，可通过弹性规则实现子元素的自适应调整，适用于复杂对齐和响应式场景。
⭐ tips：Flexbox（弹性盒布局）是 CSS3 引入的一种布局模式，非常适合于一维布局。它使得垂直和水平对齐都变得简单，并且可以轻松实现自适应和响应式布局。相关介绍：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (opens new window)
- 布局特点： 支持自定义 “主轴方向”（水平方向或垂直方向），子元素会沿主轴方向排列；支持设置主轴和交叉轴的对齐方式，轻松实现元素居中、分散排列等复杂对齐效果。
- 适用场景： 数据卡片横向排列（如 3 个数据卡片在一行平均分配宽度）、导航栏按钮对齐（如左侧 logo + 中间菜单 + 右侧登录按钮）、响应式布局（大屏横向排列，小屏自动切换为纵向堆叠）。
- 设置项： 在容器 “布局设置” 中选择 “Flex 布局” 后，可配置以下参数：
- 布局方向：
- 水平（从左往右，排列组件）
- 垂直（从上往下，排列组件）
- 换行（从左往右，根据内容换行）
- 网格间距： 子元素之间的间距
- 主轴对齐： 指与布局方向同方向的对齐方式
- 当布局方向为水平时，指水平方向的对齐
- 当布局方向为垂直时，指垂直方向的对齐
- 交叉轴对齐： 指与布局方向垂直方向的对齐方式
- 当布局方向为水平时，指垂直方向的对齐
- 当布局方向为垂直时，指水平方向的对齐
- 多行布局： 当布局方向为“换行布局”时，可使用它作为垂直方向的对齐
- 其他： 溢出规则、组件事件、尺寸、间距、边框、背景、组件级CSS扩展
1 / 0