弹性布局（Flex Layout）
基于真实 CSS Flexbox 的自动布局：让画板随内容自动撑开、元素自动对齐与换行，设计响应式界面像写前端一样自然。
为什么用弹性布局
传统设计工具靠手动摆放元素，一旦文案变长、列表增减，所有间距都要重调。希爱设计的弹性布局底层就是真实的 CSS Flexbox：元素按规则自动排列，容器随内容自动伸缩，设计师产出的布局与前端实现方式完全一致。
创建一个弹性布局容器
- 选中需要排列的多个图层，或选中一个画板/编组
- 在右侧设计属性中找到「弹性布局」并启用
- 选择排列方向：水平（行）或垂直（列）
- 设置元素间距与内边距（Padding）
- 选择对齐方式：起始、居中、两端对齐等
- 需要换行时开启「自动换行」
关键概念
- 方向：决定子元素沿主轴横向还是纵向排列
- 间距（Gap）：子元素之间的统一距离
- 内边距（Padding）：容器内容与边框之间的距离
- 对齐：主轴对齐与交叉轴对齐，类似 justify-content / align-items
- 尺寸模式：固定尺寸、适应内容（hug）、填充容器（fill）
- 换行：空间不足时子元素自动换到下一行或下一列
三种尺寸模式
Hug（适应内容）让容器随子元素自动收缩或增长，适合按钮和标签；Fill（填充）让元素占满父容器剩余空间，适合卡片与输入框；Fixed（固定）则保持指定宽高。善用这三种模式，可以让一套组件适配任意长度的文案。
嵌套布局
嵌套布局
弹性布局可以层层嵌套：外层用垂直布局排列整页，头部用水平布局排列图标与标题，列表项内部再用水平布局对齐头像与文字。这与真实网页的 DOM 结构一致，检查面板给出的 CSS 可以直接使用。
实用提示
- 先做「内容会变」的元素（按钮、输入框、卡片），优先给它们启用弹性布局。
- 间距优先用 Gap 和 Padding，而不是手动拖动，后续改版只需改一个数值。