拖拽布局系统的底层原理：栅格、约束与自由定位

结论先行：拖拽布局系统的所有行为，都可以归到三种模型：栅格（Grid）把画布切成列，约束（Constraint）用相对关系描述位置，自由定位（Absolute）记录绝对坐标。三种模型的差别不在手感，而在"换屏幕尺寸时算什么"。看懂这一点，就能预判一个编辑器做出来的页面在手机上会不会散架。

一、布局模型要解决的两个问题

任何布局系统都要回答两件事：元素放在哪，以及容器变化时元素怎么跟着变。三种模型对这两个问题的答案完全不同，也因此在不同的场景下失效。

画布被切成固定列数，常见是 12 列，元素占据整数个列宽，并通过行高倍数控制纵向间距。拖动时，元素会吸附到最近的列边界。

坐标计算方式是离散的：位置 = 列序号 × 列宽 + 间距。因为离散，所以对齐天然整齐，多人协作时不容易出现 1px 偏差。代价是自由度受限：想让一个元素偏移半列，只能改列数或加辅助容器。

栅格在两类场景下失效：

元素不记录绝对坐标，而记录与其他元素或父容器的关系，例如"左边距父容器 16、右边距父容器 16"，意味着宽度自动撑满。拖动改变的是约束值，不是坐标值。

这是移动端布局的主流模型，也是响应式能力的来源：容器变宽，元素跟着变宽，不需要为每个尺寸单独调。约束还能表达"至少""至多"和比例关系，例如最小宽度 120、宽度占父容器 50%。

约束的失效场景同样明确：

元素记录相对父容器的 x、y 坐标与固定宽高，图层顺序决定遮挡关系。这是设计工具最直观的模型，拖到哪就停在哪，适合海报、大屏、印刷品这类画布尺寸固定的场景。

失效场景几乎是必然的：容器宽度从 375 变到 414，所有绝对坐标不会自动调整，右侧元素被裁切或留出空白。因此自由定位通常只作为局部模式存在，例如画布上的浮动按钮、角标、装饰元素。

维度	栅格 Grid	约束 Constraint	自由定位 Absolute
位置单位	列序号与行高倍数	相对边距与比例	绝对坐标与固定尺寸
响应式能力	中，靠列数重排	高，自动伸缩	无
对齐稳定性	高，吸附到列边界	中，依赖约束完整度	低，易出现 1px 偏差
实现复杂度	低，计算简单	高，需约束求解	最低，直接赋值
典型失效场景	内容宽度不定、深层嵌套	循环依赖、过度约束、元素过多	换屏幕尺寸、多端复用

读表方法：第二列决定"多端能不能复用"，第四列决定"编辑器好不好做"，最后一列决定"什么时候必须换模型"。

单一模型无法覆盖全部需求，所以成熟做法是分层：

组合的关键是边界清晰：哪些容器允许自由定位、自由定位的元素是否参与文档流。边界模糊时，最常见的结果是"设计稿好看，真机错位"。

布局系统的能力，最终体现在"改一处，其他地方会不会跟着对"。拖得顺手只是入场券。

A：取决于画布是否固定。需要适配多种屏幕宽度的页面，栅格与约束明显更稳；海报、大屏、印刷品这类尺寸固定的画布，自由定位效率更高。判断标准是"同一份设计要不要在第二种尺寸上出现"。

A：多数是约束不完整或冲突。元素只约束了左边距、没约束宽度，内容变长就会溢出；同一方向同时固定左右边距与宽度，求解器只能忽略其中一条。排查方法是先补齐宽度或右边距，再看冲突提示。

A：本质是坐标取整。栅格吸附把坐标映射到最近的列边界，参考线吸附计算元素边缘与其他元素边缘的距离，小于阈值就对齐。阈值通常设为 4~8px，过大导致拖不动，过小导致对不齐。