框架

框架（也称为 CSS 框架）是用于组织布局的显示属性。它提供了重新排列和调整框架内容大小的灵活性，以生成动态、响应式的设计。请注意，由于框架是一种显示选项，因此它充当 指示.

在本次会议中，您将发现：

1. 如何建立和调整框架
2. 如何在框架中定位内容
3. 如何转移、扩展和调整框架内容
4. 如何制定响应式框架

如何建立和调整框架

为了建立框架，从 添加面板。随后，选择该元素，导航至 样式面板 > 布局 > 展示并选择 框架.

您可以直接在 样式面板 或框架编辑模式。要进入框架编辑模式，请按“扳手”图标旁边 列 和 行 字段，或者在工作区中选择框架并单击“网格编辑”图标。要退出框架编辑模式，请单击 完毕 或单击“关闭”框架设置中的图标。

合并列和行

要在框架中包含新列和新行，请继续 样式面板 > 布局 > 展示 并利用“增加”按钮 列 和 行 字段。您还可以：

• 在列和行字段中插入数值
• 进入框架编辑模式并点击“加”图标 样式面板 > 框架设置
• 启动框架编辑模式并点击“加”图标

复制并消除列和行

删除列和行有三种方法：

• 采用“减少”按钮 列 和 行 字段
• 进入框架编辑模式，将鼠标悬停在列或行上 样式面板 > 框架设置，然后点击“垃圾“ 图标
• 进入框架编辑模式，单击或右键单击工作区上的列或行标题，然后选择 删除

在框架编辑模式下，有两种方法可以复制列和行。您可以将鼠标悬停在列或行上 样式面板 > 框架设置 并选择“复制”图标，或右键单击工作区上的列或行标题并选择 复制.

重新组织列和行

您可以在框架编辑模式下重新排列列和行。将鼠标悬停在要移动的行或列上，然后将左侧出现的手柄拖动到所需位置。

修改列和行之间的间距

空格可让您指定列和行之间的距离，而无需添加边距或填充。要调整列和行之间的间隙大小，请前往 样式面板 > 布局 > 差距 并输入一个值。

默认情况下，列和行之间的边距是同步的。这意味着如果您修改列的间隙大小，行的间隙大小将自动调整为相同的值。要单独更改列和行之间的间隙，请点击“锁”图标来解锁。

内部提示： 要快速扩大或缩小间隙，请滑动 差距 杠杆或压力机 选项 （在 Mac 上）或 Alt （在 Windows 上）并将鼠标向左或向右移动到列或行字段上。 

调整列和行的大小

您可以在框架编辑模式下通过选择并拖动工作区上的列或行标题到所需大小来修改网格列和行的比例。您还可以通过单击行或列标题来指定列或行的自定义大小。

框架大小

确定框架尺寸时，您可以使用标准单位（例如 px、em、rem），也可以使用 FR 单位。FR 单位表示框架中可用空间的一小部分。您可以使用它来描述行和列的长度，类似于百分比或像素单位，但与固定百分比或像素单位不同，FR 单位会在考虑间隙的同时自动计算行和列空间。

您还可以设置 最小/最大 值，以确保行和列不会低于指定的最小值或超出规定的最大值。例如，如果您希望行保持最小高度为 200px，则可以将最小值设置为 200px，将最大值设置为自动。随后，行将根据其中的内容扩展，并且永远不会低于 200px。

如何在框架中定位内容

您可以在框架内插入各种子元素（例如标题、图片、div 块等）。默认情况下，每个新的框架子元素将填充一个单独的框架单元格并从左到右占据下一个可用单元格。如果一行中没有空单元格，则会创建新行以容纳新的框架子元素。

改变框架内容的流向

您可以选择改变框架子项的方向 样式面板 > 方向。在这里，您可以选择 水平的，将子项从左到右排列，或者 垂直的，它将子项从上到下排列。

将内容手动放置在网格内

要在网格中手动定位内容，只需按住 转移 键，同时将元素拖入网格。您还可以将现有网格子项的位置设置修改为手动。为此，请选择网格子项，导航到 样式面板 > 网格子项 > 位置并将其更改为 手动的.

手动放置的网格子项将保留在其指定的网格单元中，而自动定位的网格子项将进行调整，以移动到下一个单元来容纳新的网格子项。

如何在网格单元中嵌套各种元素

您可以通过在网格子元素内嵌套元素，将多个元素插入单个网格单元。为此，首先将结构元素（如 div 块）添加到网格作为直接网格子元素。将结构元素添加为网格子元素后，您可以通过按住 命令 （在 Mac 上）或 控制 （在 Windows 上）并将元素拖入网格单元。或者，您可以选择结构元素并使用快速查找来添加额外元素。

在网格中复制内容

您有两种方式可以复制网格子项，以便在多个网格单元中重复使用相同的内容：

• 按住 选项 （在 Mac 上）或 Alt （在 Windows 上）并拖动要复制的内容并将其重新定位到新的网格单元
• 复制内容，然后选择网格并粘贴内容

管理网格中内容的移动、跨越和对齐

将内容放置在网格中后，您可以自定义内容的设计。您可以通过将内容移动到不同的单元格来调整内容的位置，使其跨越多个单元格，甚至可以在网格内对齐内容。

重新定位网格子项

要在网格内移动内容，请选择网格子项并将其拖动到画布上或网格内的所需位置。 航海家.

排列网格子项的顺序

您还可以通过选择网格子项并导航到 样式面板 > 网格子项 > 命令.

在网格中对齐内容

要更改所有网格子项的对齐方式，请选择网格并转到 样式面板 > 布局 > 对齐。 使用 定位框 （3 x 3 网格）可快速对齐网格内容。 X 和 是 轴对应于在 定位框. 了解有关利用对齐框的更多信息。

要调整特定网格子项的对齐方式，请选择该网格子项并导航到 样式面板 > 网格子项。从那里，您可以设置网格子元素的对齐方式或对齐方式 对齐 和 证明合法.

扩展网格子元素

要将自动放置的网格子项扩展到多个网格单元，请选择网格子项，然后继续 样式面板 > 网格子项 > 位置，并指定 列 和 行 网格子项应该跨越。

要拉伸手动定位的网格子项，请选择网格子项，访问 样式面板 > 网格子项 > 位置，并标明开始和结束 列 和 行 对于网格子项。

安全网格儿童安置

使用负值，您可以根据网格的末尾定位网格子项 - 它们指的是从右到左或从下到上的单元格。

如果出现以下情况，负网格子项定位可能会有所帮助：

• 您希望将导航栏的位置保持在第一列和最后一列之间，而不是在每次添加新列时重新调整它
• 无论添加了多少行，你都希望将页脚保持在网格的底行 — 将页脚放置在第 -1/-1 行
• 您的目标是让主要内容部分始终位于网格的中心，并且两边的列数相等 — 将“结束”值设置为与“开始”值相等的负值（例如 3/-3）。这可确保即使在较小的断点处移除列，子元素仍保持居中。

重置网格子配置

网格子项设置特定于所选元素，不与类一起存储。更改的设置通过 样式面板 仅适用于当前断点处的选定元素。这些设置会向下级联到较低的断点，并用橙色标签表示。如果您在较小的断点上覆盖继承的（即橙色）设置，指示器将恢复为粉红色。

要消除任何已应用的网格子设置，请单击设置的粉色标签，然后选择 重置.

网格子项之间的重叠

手动定位的网格子元素在相同单元格内相交时会自动重叠。您可以在导航器中重新调整这些重叠元素的堆叠顺序，也可以修改其定位和 z-index 设置。

填充未占用的网格单元

当网格子项跨越时，网格中可能会保留空单元格。要自动用内容填充这些单元格，请导航至 样式面板 > 布局 > 方向 并选择“密集”图标。

笔记： 激活“密集”设置会尝试将网格子项容纳在网格的空单元格中。但是，这可能会造成可访问性问题，因为它只会影响项目的显示，而不会影响它们在页面上的实际位置。

创建响应式网格设计

为了确保您的网格设计适应各种屏幕尺寸，您可以手动删除较小断点上的列，或者启用自动调整以自动生成列和行以适应较小的屏幕。

自适应网格布局

为了保证您的网格设计在所有设备上都能响应，请根据需要调整列数以获得较小的断点。

如果无法改变较小断点处的列：

• 尝试改变你的网格 方向 到 排
• 确认这些列中没有手动定位的网格子项
• 确认没有子元素跨越这些列

实现自动调整

自动适应是网格的一个强大功能，它可以自动重复和包装列以确保所有屏幕尺寸的响应能力，而无需针对每个断点进行调整。

要启用自动调整，请仅保留网格中的一列和一行。切换到网格编辑模式，单击列标题，指定列的最小和最大尺寸，然后启用 自动调整。将自动生成并重复附加列，以在网格内响应地分发内容。