用 Flexbox 容器搭建响应式页面

本文由国际版原文本地化，文末提供原文链接。涉及的能力以易企办中国版租户和权限为准。

弹性容器使用 Flexbox 的布局思路，将子控件按行或列分布。它适合卡片、筛选工具栏、仪表盘和不同宽度下需要重排的内容。选择容器时同时考虑结构、内容和实际操作。

比较容器与区块、列

已有页面可继续用区块和列维持布局。弹性容器可以直接安排子控件，也可以嵌套容器以形成标题、正文和操作区。需要同时控制多个行列时可根据业务布局考虑网格。

配置方向、对齐和换行

1. 将容器放到画布，设定横向或纵向布局。
2. 将文本、图标、字段或其他容器放入其中，设置对齐、分布与间距。
3. 为窄屏设置换行、宽度和堆叠方式。用长名称、无图片和不同数量的记录测试。
4. 检查键盘顺序、内容顺序、按钮可用性及表单错误提示。

给容器配置动作

在支持的版本中，可将卡片区域配置成明确的操作入口，例如打开采购记录详情。为动作提供清楚的提示，核对当前记录标识、权限与键盘操作。若卡片内还有独立按钮，测试各自的点击行为。容器嵌套应反映实际阅读顺序，便于在导航器中管理。相关入口见易学堂表单布局和容器动作产品更新。

查看原始文章