Flexbox 容器

理解 Flexbox 容器的工作原理

容器的基本逻辑

容器是一个盒子，它容纳您网页上的元素，包括小工具和其他嵌套容器，以提供您需要的布局。您可以快速创建容器，并将它们保存为重复使用的模板，以简化您的网站构建过程。

容器中项目的布局

容器内的元素可以具有两种不同类型的属性：它们作为一个群体的行为，以及它们作为个别元素的行为。首先，我们来看看容器作为一个群体的行为。您可以在布局（Layout）标签中设置这些属性。

注意：除了小工具，您还可以将容器放置在另一个（父）容器内部。这被称为“嵌套容器”。

方向（Direction）

当您向容器添加项目时，需要设置内容的方向，选项包括行（Row）或列（Column）。容器中项目的四种可能方向：

• 行 Row –
• 列 Column –
• 逆行 Reverse Row –
• 逆列Reverse Column – 

对齐（Alignment）

对齐设置控制容器内对象的对齐方式，这取决于您将方向设置为行还是列。如果将容器的方向设置为行，对齐决定项目是置于容器的顶部、中部还是底部。如果将方向设置为列，对齐则将元素置于左侧、中心或右侧。

排列（Justification）

排列决定了容器中项目之间的间距以及项目与容器边界的距离。

元素间距（Elements Gap）

此设置决定您在容器中的项目之间将有多少空间。默认元素间距为20PX，但您可以通过转到站点设置中的布局来编辑此设置。

包裹（Wrap）

包裹设置决定行或列中的所有项目是否被迫排成一行，或者是否溢出以占用额外的行或列。这确保所有内容都保留在容器边界内。

容器宽度（Container width）

容器宽度有两个选项：盒装（Boxed）和全宽（Full Width）。

• 盒装：保持内容在容器内的宽高比。当您调整容器大小时，盒子会缩放以适应宽高比。
• 全宽：保持宽高比，但宽度将与容器的左右边界匹配。如果您调整容器使高度小于内容，内容将在顶部和底部边界溢出，但不在左右边界溢出。

如何改变容器中项目的布局？

遵循以下三个步骤：

1. 从选项卡中选择“编辑容器”或通过右键点击容器。
2. 导航至布局标签。
3. 编辑所需的属性。

如何改变个别元素的属性？

如果您想改变个别元素的属性：

1. 导航至您想要修改的画布上的元素。
2. 选择高级标签。
3. 编辑所需的属性。

容器为您提供了一种流线型的方法来布局网页内容。

 

设置 Flexbox 容器的大小和行为

Flexbox 容器允许您快速排列和修改网站小工具，并创建模板。一旦保存，您可以将这些模板应用到整个网站上，节省宝贵的时间并在所有页面上创建风格的连续性。

操作容器时，了解如何设置容器的大小是非常重要的。您可以通过选择容器并导航到布局（Layout）标签来调整容器的大小和行为。在此部分，您可以：

更改容器大小

调整容器的行为

调整容器大小

要调整容器的大小：

1. 选择容器
2. 导航至布局（Layout）标签
3. 进入容器（Container）部分

内容宽度（Content Width）允许您从下拉菜单中选择盒装（Boxed）或全宽（Full Width）。您可以调整盒装和全宽容器的宽度，但它们在容器内部内容的表现有所不同：

• 盒装：如果您想调整容器内部内容的宽度而不是容器的宽度。
• 全宽：当您调整容器宽度时，内容将适应容器的宽度。您也可以通过填充和边距调整容器的内容宽度。

最小高度（Min Height）允许您设置容器的最小高度。这在确保文本或对象在移动布局上可见时非常有用。

您可以使用像素、百分比或视口高度和宽度调整容器的高度和宽度。在每个选项的右上角选择您想使用的单位。

调整容器行为

您可以使用溢出（Overflow）和 HTML 标签选项调整容器的行为。

溢出（Overflow）决定当内容超出容器大小时，容器应如何处理内容。

默认（Default）：超出容器大小的项目是可见的。

隐藏（Hidden）：只有在容器内的项目是可见的。超出容器边界的部分将被隐藏。

自动（Auto）：只有容器边界内的项目是可见的。添加滚动条，使您可以找到并查看容器内隐藏的项目。

HTML 标签（HTML tag） 通过从下拉菜单中选择最适合您的容器的 HTML 标签，包装整个容器。

注意：HTML 标签对 SEO 至关重要。容器在 DOM 层次结构中定义得越高，搜索引擎就越认为内容重要。

您将需要为响应式布局单独设置 HTML 标签。

提示：通过选择“a” HTML 标签，您可以使容器可点击。