better-layout

布局

此技能设定分组、对齐、间距和响应式结构，然后通过调整尺寸、翻译和镜像为 RTL，对这些结构进行压力测试。

所有修复都写入项目的样式系统。以下数值仅适用于项目没有间距刻度或密度系统的情况；否则请使用项目令牌。发现的问题必须有可展示的故障，例如内容被裁切、发生重叠、镜像出错或分组难以辨认。仅仅数值与这些起始值不同，不算问题。

点击区域和焦点行为属于 better-accessibility。圆角、阴影和动画属于 better-ui。行长、文本间距和截断机制属于 better-typography。文字本身属于 better-writing。

用间距分组，而不是用线条

优先用间距分组，其次用背景形状，最后才用分隔线，且仅在间距本身无法表达结构时使用。组间距至少是组内间距的 2 倍，因此组内使用 8px 时，组间距应为 16px 或更大。具体做法见 grouping-and-alignment.md。

让控件与内容有所区分

为每个交互元素添加背景形状、边框、下划线，或将其放在工具栏等固定区域中。控件若与旁边的静态文本样式相同，就无法让人看出它是控件。参见 grouping-and-alignment.md。

对齐到共用边缘

选取少量对齐边缘，并让所有内容都与之对齐。每一层嵌套使用一个项目间距单位，16px 是一个实用的默认值。参见 grouping-and-alignment.md。

对需要镜像的内容使用逻辑属性

将依赖方向的布局写成起始和末尾属性：margin-inline-start、padding-inline-end、inset-inline-start、text-align: start。物理左侧和右侧仅用于安全区域内边距等物理几何属性。映射表和 RTL 布局规则见 grouping-and-alignment.md。

按重要性排序

最重要的内容放在靠近顶部和起始边缘的位置。在一行内，标识性内容放在前面，元数据和操作放在后面。视觉顺序应与 DOM 顺序一致，因此绝不要使用 order、row-reverse 或网格布局将内容移出源代码顺序。参见 grouping-and-alignment.md。

每个视图只设一个主要操作

每个视图只设一个主要操作。次要操作超过 3 个时，将其放入菜单。优先使用较短的视图并链接到更深层的内容，而不是在顶层视图中展示所有内容。主要操作的颜色标识由 better-colors 负责。

提示存在隐藏内容

每个屏幕外或折叠的内容都需要有可见提示。使用项目既有的提示方式，让下一项在滚动边缘外露出 16–32px，或显示展开控件。

用户需要的截断值必须有查看完整内容的途径：展开控件、详情视图，或同样可通过键盘访问的工具提示。截断机制由 better-typography 负责。具体做法见 spacing-and-adaptivity.md。

无边框控件需要更大的间距

如果没有既有的密度系统，带边框或填充的相邻控件之间应从 12px 的间距开始。无边框文本和图标控件的可见字形之间应留出 24px，并将每个按钮自身的内边距计算在内。紧凑布局可以使用更小的间距，但点击区域绝不能重叠，控件也必须保持区分度。参见 spacing-and-adaptivity.md。

按钮与边缘保持内缩

在内容布局中，全宽按钮应位于布局边距内，在移动设备上从距内联方向边缘约 16px 处开始。与边缘齐平的操作仅适用于遵循既定平台界面、考虑安全区域且能与系统 UI 清晰区分的情况。请参阅 spacing-and-adaptivity.md。

内容延伸至边缘，控件悬浮其上

背景和媒体内容延伸至视口边缘。控件和文本应留在布局边距和安全区域内。只有当视口 meta 标签包含 viewport-fit=cover 时，env(safe-area-inset-*) 才会是非零值。

内容会滚动到粘性界面元素下方。将 scroll-padding-block-start 设置为粘性页眉的高度，确保锚点目标和聚焦元素不会落在其下方。请参阅 spacing-and-adaptivity.md。

结构保持到无法适配为止

断点应由内容决定，而不是由设备预设决定。保留展开布局，直到它无法适配，然后再折叠。组件级适配优先使用容器查询，并先测试支持范围内最小和最大的尺寸。请参阅 spacing-and-adaptivity.md。

为内容增长和裁切做好准备

翻译后的字符串会变长，较短的字符串按比例增长得更多，因此一个单词的按钮标签是屏幕上风险最高的元素。使用 max-width 和 min-height 设置文本容器尺寸，不要使用固定宽度或高度，并允许行内容换行。使用伪本地化以及德语等字符串较长的语言进行测试。

调整大小、缩放或滚动时，切勿让关键操作被裁切。应将其保留在正常文档流中，或放在稳定的界面元素中。请参阅 spacing-and-adaptivity.md。

完成前检查

检测模式	修复方法
grid-template-columns: … 1fr，或承载长文本或宽表格、导致内容溢出轨道的弹性子项	在轨道上使用 minmax(0, 1fr)，在弹性子项上使用 min-width: 0
width: 100vw	使用 width: 100%；100vw 会包含滚动条，在桌面端造成水平滚动
全高移动面板上的 height: 100vh	使用 100dvh，避免浏览器工具栏和键盘遮挡底部
承载文本的盒子使用带固定长度的 height:	使用 min-height，或使用带 overflow-y: auto 的 max-height
可复用组件内部使用 @media (max-width: …)	在组件父级使用 @container
在没有宽度的弹性项、行内块或绝对定位元素上使用 container-type: inline-size	为其指定明确宽度；尺寸包含会使收缩至适配内容的盒子宽度变为零
使用 env(safe-area-inset-*)，但视口 meta 标签中没有 viewport-fit=cover	添加它，否则内边距会解析为 0
inset-inline-* 或 *-inline-* 与 safe-area-inset-left 或 -right 组合使用	使用对应内边距的物理方向 left 或 right，并添加 [dir="rtl"] 覆盖规则
镜像 UI 上使用 float: left	使用 float: inline-start
镜像 UI 上使用 translateX 或 background-position: left	添加 [dir="rtl"] 覆盖规则；两者都没有逻辑方向形式
粘性页眉未设置 scroll-padding-block-start	将其设置为页眉高度

报告

严重程度。 在受支持的视口下，HIGH 表示内容或操作受阻。在 320px 宽度或 200% 缩放时发生裁切或重叠，始终属于 HIGH；内容被截断且无法查看完整值，也属于 HIGH。内容超出滚动边界，或被折叠内容遮挡且没有明显提示，同样属于 HIGH。MEDIUM 会损害层级结构、阅读顺序或适配性。LOW 指孤立的对齐或间距优化问题。

验证。 无浏览器时，检查是否使用逻辑属性而非物理属性、容器和媒体查询是否适用于受支持的视口列表，以及 DOM 顺序是否与视觉顺序一致。有浏览器时，检查每个受支持的宽度、320px、200% 缩放和 RTL 镜像。将无法执行的每项检查报告为 Not verified。

格式。 按违反的原则分组，并按严重程度排序；每个根本原因占一行，列出其出现的所有位置：

Severity	Location	Before	After	Why

Location 格式为 path/to/file:line。Why 需指出相关原则及其对用户的影响。

若仍有任何 HIGH，则以 Block 结尾；否则以 Approve 结尾，并将其余事项保留在表格中作为待处理工作。对于未检查的范围，绝不标记为 Approve。若无待处理问题，则写明 "No actionable layout findings" 并报告验证情况。