如何使用Figma的自动布局调整功能-训练营

关于Figma的自动布局最强大功能的一切

添加自动布局允许您使用调整大小功能来控制帧中对象的尺寸。调整大小功能具有三个属性：固定宽度或高度、包容内容和填充容器。

在自动布局框架中，您可以应用调整大小功能于：

• 垂直和水平轴上的对象
• 文本图层
• 形状图层
• 嵌套自动布局框架

固定宽度或高度

当自动布局框架设置为固定宽度或高度时，对象的尺寸将保持不变。这意味着无论框架的大小如何变化，对象的宽度或高度都将保持不变。 ## 自适应内容

动态调整自动布局框架的大小，以尽可能小地包围其中的对象。

🪄 自适应内容调整框架大小以适应内部对象的示例。

自适应内容调整大小。

将自动布局添加到父框架默认为在两个轴上都自适应内容，并自动调整框架大小以适应对象。此外，更新对象周围的填充会使父框架紧贴对象。

🪄 随父容器一起增长的嵌套对象示例

父框架和嵌套框架，两者都具有自动布局。

在此示例中，父框架具有自动布局，并且水平轴上的调整大小设置为自适应内容。嵌套框架也具有自动布局，并且水平轴上的调整大小设置为自适应内容。如上面的演示中所示，两个框架在水平方向上一起增长。

填充容器

内部对象将拉伸至 🪄 使用填充容器示例的文本

请注意，填充容器指令是在文本的外部容器中使用的，以便将文本的宽度和/或高度调整为容器的大小。

<div style="width: 300px; height: 200px; border: 1px solid black;">
  <p style="width: fill-container; height: fill-container;">这是一个使用填充容器属性的文本示例。</p>
</div>

上面的代码示例中，我们创建了一个宽度为300像素，高度为200像素的外部容器，并给它添加了一个黑色的边框。在这个容器中，我们添加了一个段落元素 <p>，并使用填充容器属性来调整它的宽度和高度，使其填充整个容器。

使用填充容器属性后，文本将根据容器的大小自动调整其宽度和高度。这在需要自适应大小的文本显示时非常有用。