一组卡片在画板上排成竖列,新增几张后,最下面的内容被挤到画板外。垂直换行适合处理这类情况:给容器明确的可用高度,内容排满一列后,让后续项目接着进入新列。它解决的是“竖向空间用完后往哪里排”,而不是自动决定每列该有多宽。

先判断:需要换列,还是只需要限定宽度?
如果内容始终应保持单列,只是希望文字和卡片不要铺得太宽,限定宽度更直接。垂直换行则用于另一种需求:容器高度有边界,项目数量可能变化,而且超出一列的项目应该继续显示在相邻列。比如整理一组会增减的功能入口或资料卡片时,可以用它观察内容变化后的排布,而不必每次手动把末尾项目移到旁边。
这两种设置并不互斥。高度决定何时换列,宽度决定列能否容纳内容。如果容器会随着项目增加不断变高,换列就可能不会在预期位置发生;如果只限制高度,却不给新增列留出横向空间,内容仍可能越过画板边缘。因此,先确认画板能容纳几列,再决定容器的高度与项目宽度。
按“项目—换列容器—外层画板”搭建
- 先整理单个项目。确认卡片或条目的内部内容能够适应文案变化,避免文字一变长就破坏项目本身的排列。需要一起移动的图标、文字等内容,应留在同一个项目层级中。
- 选中同级项目,建立自动布局容器。将排列方向设为垂直,再启用换行。不要把不同层级的元素直接混进这一容器,否则换列时移动的可能是卡片内部元素,而不是完整卡片。
- 确定换列边界。为容器设定符合画板可用区域的高度,并检查项目宽度、容器内边距和列间距。先放入足以形成第二列的内容,确认后续项目确实进入新列。
- 放回外层画板检查。分别增加、删减项目,并替换一条较长的文案。观察新列是否仍在画板内,以及外层容器是否因内容变化产生了意料之外的伸展。
Figma 的自动布局会根据方向、间距、内边距和对齐等属性,在内容变化时重新排列元素。搭建时不要只看初始状态:恰好排满一列的画面通常最整齐,却最难暴露换列后的问题。
换行后,重点检查这三处
间距看边界。第一列末尾到容器底部、第二列起点到容器顶部,以及两列之间的留白,应符合原本的排布意图。列间距不能代替项目之间的间距;如果两者看起来混在一起,先检查容器内边距,再检查项目间距。
对齐看变化。短文案时齐整,不代表长文案时也齐整。增加内容后,检查同列项目的起始边缘,以及不同列首个项目的位置;如果卡片高度随内容变化,尤其要看后续项目是否仍保持清楚的阅读顺序。
层级看移动单位。换行后若出现文字单独跑到下一列、卡片背景留在原处,优先检查嵌套层级,而不是反复调整间距。换列容器的直接子项应当是完整项目;项目内部的排列交给各自的内部容器处理。
发布设计稿前,可以用三个状态快速自检:内容不足一列、刚好触发换列、增加内容后出现更多列。只要每个状态下都能看清项目顺序,列没有越出画板,间距和对齐也保持预期,这组多列布局才算搭稳。