Container Layout

定义容器布局

介绍
容器布局标签控制容器中项目的排列方式。以下是这些控制的概述。

布局标签（Layout tab）

内容宽度（Content Width）
控制容器中的元素是被限制在盒子内（Boxed），还是占据容器的整个宽度（Full Width）。在下拉菜单中选择“盒装”或“全宽”选项。

那么，当放置新容器时，你应该使用“盒装”还是“全宽”呢？

• 如果你想调整容器内内容的宽度，但不是容器的宽度：使用“盒装（Boxed）”，并使用宽度控制调整容器内容的宽度。
• 如果你想调整容器的宽度，但不是容器内容的宽度：使用“全宽（Full Width）”，并使用宽度控制调整容器的宽度。
• 如果你想同时调整容器的宽度和容器内容的宽度：使用“全宽”，使用宽度控制调整容器的宽度，并在高级标签中用填充调整容器内容的宽度。

注意：内容宽度设置可以为响应式布局单独设置。

宽度（Width）
用像素/百分比/视口宽度控制容器的宽度或容器内容的宽度。这个控制根据内容宽度是否设置为“盒装”或“全宽”而有不同的效果。

盒装（Boxed）：当内容宽度设置为“盒装”时，宽度控制允许调整容器内内容的宽度。

全宽（Full Width）：当内容宽度设置为“全宽”时，宽度控制允许调整容器的宽度。

注意：默认情况下，“盒装”和“全宽”容器会根据其在布局中的位置拉伸可用空间——如果容器是父级，那么它将占据整个视口宽度——如果容器嵌套在父容器中，嵌套的将占据整个父容器的内容宽度。

最小高度（Min Height）
控制容器内容的最小高度。使用滑块或手动输入值来设置所需的最小容器高度，单位为像素或视口高度。

注意：将值设置为100VH将适应视口的高度。此设置可以为响应式布局单独设置。

 

溢出（Overflow）
控制如果容器的内容不适合视口，溢出的内容是否应该被隐藏，或者可见，导致水平滚动。从下拉选择器中选择默认（Default）、隐藏（Hidden）或自动（Auto）。

• 默认（Default）：容器外的项目溢出可见。
• 隐藏（Hidden）：隐藏溢出的项目。溢出的项目不可访问。
• 自动（Auto）：创建滚动条，当内容溢出时保持项目可访问。此设置允许在移动视图中滑动内容。

HTML标签（HTML Tag）
从下拉菜单中选择最适合您的容器的选项。通过选择“a”标签，容器也可以被设置为可点击。

注意：HTML标签对SEO至关重要。容器在DOM层次结构中定义得越高，其内容被搜索引擎视为越重要。此设置可以为响应式布局单独设置。

项目（Items）

以下控件可用。这些适用于容器内的所有元素。

方向（Direction）
方向选项是最基本但也是最重要的容器布局选项之一。根据您的需求和布局选择行（Row）、列（Column）或反向选项（Reversed options）。

• 行（Row）：项目水平位置。
• 列（Column）：项目垂直位置。
• 行反向（Row Reverse）：项目水平但顺序相反。
• 列反向（Column Reverse）：项目垂直但顺序相反。

对齐项目（Align Items）
对齐项目属性试图在它们的中心轴上对齐项目。根据选择的方向，它将对容器内的所有项目进行对齐。

内容调整（Justify Content）
内容调整属性定义了沿项目的中心轴的对齐方式。它还有助于在容器中的项目之间分配剩余空间。

组合属性（Combining Properties）
许多时候，您将组合对齐和调整属性以达到您的目标。在以下示例中，容器的方向设置为行。项目对齐到中心。然后可以应用调整属性以达到所需的结果。

内容间隙（Content Gap）
使用间隙选项在元素之间添加空间。它可以与对齐和调整属性一起使用，以更好地控制您的设计。滑块或值可以输入到字段中，单位为像素、百分比或视口宽度（Viewport Width）。

包裹（Wrap）
当应用包裹时，它将允许使用定义宽度的元素包装成多行，而不是强制项目到单行。这可以用来在同一个容器中创建多行元素。

对齐内容（Align Content）
如果使用了包裹属性，则只显示对齐内容属性。它类似于内容调整，因为它使用可用空间分配元素。您可以选择中心、起点对齐、终点对齐、两端对齐、环绕对齐和均匀对齐。这些将应用上述内容调整功能。

下一步
现在您已经了解了容器的布局标签中的设置，接下来可以阅读关于样式标签中容器设置的文章。