调整设置

配置设置可管理父容器内子组件的布局行为。通过利用各种调整设置，您可以控制一维或二维布局，并控制组件之间的相互显示方式。

在本教程中，您将熟悉 样式面板 > 布局 部分：

1. 初级
2. 松紧带
3. 网格
4. 行内元素
5. Flex 内联
6. 网格内联
7. 行内组合
8. 消失

初级

初级 是大多数组件的预设调整设置。基本父元素中的每个子组件都从新行开始，并占据其父元素的整个宽度，除非指定了自定义宽度。

松紧带

弹性盒子 在一个维度上组织直属子组件 — 水平或垂直。您可以个性化直属子组件的堆叠方向、它们在父元素内的排列和对齐方式、它们之间是否有间隙以及它们是否过渡到下一行。

建立弹性父元素后，该父元素的所有直属子元素都将成为弹性子元素。您可以在弹性子元素设置中替换弹性子元素调整设置（例如大小、排列、顺序）。

网格

网格设计 在二维空间中（水平和垂直）以列和行的形式组织直属子元素。您可以自定义直属子元素在网格中的定位、对齐和分配方式，并在列和行之间引入空格。您可以在网格子元素设置中修改网格子元素调整设置（即位置、跨度、对齐、对齐和顺序）。

在确定网格比例时，您可以使用 FR 单元（它会自动计算行和列空间并适应空间）来建立流体网格。

行内元素

子组件 行内元素 父元素彼此相邻排列，其宽度取决于其中的内容。当内容到达父元素的边界时，子元素会换行。

提醒： 使用内联元素时，HTML 中的空白将转换为网站设计中的可见空间。了解如何处理内联元素组件之间的空格。

Flex 内联

Flex 内联 将元素呈现为内联级弹性容器。弹性内联父元素中的子组件根据弹性框模型对齐。本质上，弹性容器转换为内联元素，而其子元素则作为弹性项目进行布局。

网格内联

网格内联 将元素展示为内联级网格容器。内联网格父元素中的子组件根据网格模型排列。与 flex inline 相比，内联网格将父元素的内联级行为与其子元素的网格布局灵活性相结合。

行内组合

行内组合 是元素内任何文本内容的预设调整设置。您可以通过调整内联元素的边距和填充来修改其布局，但无法修改其宽度或高度。

消失

您可以采用 消失 调整设置以完全隐藏元素。配置为消失的元素不会被浏览器显示，这对于改变内容在移动设备上的展示方式非常有用。设置为消失的元素也会被排除在可访问性结构之外，导致元素及其子元素无法被屏幕阅读器等辅助技术访问。