快速提示：z索引和自动利润在flexbox中的工作方式

Flexbox 广泛用于解决常见的布局问题，例如粘性页脚和等高列。除了这些功能外，它还提供了一些不太流行的其他实用功能。让我们探索其中的两个！

关键要点

• 即使 flex 项目的 position 属性设置为 static，Flexbox 也允许将 z-index 属性应用于未定位的元素（例如 flex 项目）。这可以用来控制元素的堆叠顺序。
• Flexbox 中的自动边距可用于实现 flex 项目沿主轴的自定义对齐。它们吸收额外的空间并将相邻项目推开，从而实现独特的 UI 模式。
• 尽管视觉上看起来相似，但使用自动边距和 flex-grow 属性可能会产生不同的布局结果，尤其是在元素的计算宽度或高度方面。选择最符合所需布局的方法至关重要。

Flexbox 和 z-index

您可能已经知道，z-index 属性仅适用于定位元素。默认情况下，所有元素的 position 属性都为 static，并且未定位。当元素的 position 属性设置为 relative、absolute、fixed 或 sticky 时，该元素即为“定位”元素。

但是，未定位的元素（例如 flex 项目）也可以接收 z-index 属性。CSS 弹性盒布局规范指出：

Flex 项目的绘制方式与内联块完全相同 [CSS21]，不同之处在于使用顺序修改的文档顺序代替原始文档顺序，并且即使 position 为 static，z-index 值（非 auto）也会创建一个堆叠上下文。

为了理解这种行为，请考虑以下示例：

CodePen 演示链接

在这里，我们定义了两个元素：.front 元素和 .back 元素。.front 元素有一个子元素，一个带有数字“1”的盒子。.front 元素本身是绝对定位的。具体来说，它的 position 属性为 fixed，并覆盖整个视口。

我们的 .back 元素是一个 flex 容器。它包含两个子元素——带有数字“2”和“3”的盒子。根据我们上面讨论的内容，我们可以设置其 flex 项目的 z-index 属性，即使它们不是定位元素（即它们的 position 属性为 static）。

请注意，当我们通过单击上面的演示中的按钮将 z-index: 2 添加到 flex 项目时，它们位于 .front 元素的顶部。

Flexbox 和自动边距

通过将自动边距应用于 flex 项目，我们可以解决常见的 UI 模式。首先，让我们假设我们想要构建这个典型的标题布局：

要构建它，我们将使用 flexbox。不需要浮动、固定宽度或任何类似的东西。

这是我们的标记：

<header>
  <nav>
    <h1 id="LOGO">LOGO</h1>
    <ul class="menu">
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
    </ul>
    <ul class="social">
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Facebook</a></li>
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Twitter</a></li>
    </ul>
  </nav>
</header>

我们的 CSS 如下所示：

header {
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
}

nav {
  display: flex;
  align-items: center;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.menu {
  margin-left: 60px;
  margin-right: auto;
}

在这个例子中，我们的 nav 元素是 flex 容器，logo、主菜单和社交菜单是 flex 项目。从之前的可视化可以看出，前两个 flex 项目沿主轴与 flex 容器的左侧对齐。相反，社交菜单沿主轴与其父元素的右边缘对齐。

实现这种自定义对齐的一种方法是向主菜单添加 margin-right: auto。只需一行代码，我们就可以覆盖社交菜单的默认对齐方式，并将其完全推到其容器的右侧。类似地，我们使用 align-self 属性来覆盖 flex 项目沿交叉轴的默认对齐方式。

除了自动边距外，我们还可以使用第二种方法来构建所需的布局。首先，我们从主菜单中删除 margin-right 属性，然后向其添加 flex-grow: 1。

即使在这两种情况下结果看起来相同，也存在一个很大的区别。使用第一种解决方案，我们的菜单具有其初始计算宽度。例如，当视口宽度为 1100px 时，菜单宽度将如下所示：

另一方面，使用第二种解决方案，菜单宽度会变大，因为我们指定了 flex-grow: 1。当视口宽度为 1100px 时，其对应的宽度如下所示：

CodePen 演示链接

让我们现在假设我们想要修改标题布局。这是新的所需布局：

标记保持不变。我们只需在 CSS 中进行一些更改：

nav {
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 180px;
  padding: 20px;
  box-sizing: border-box;
}

.menu {
  margin-top: 60px;
  margin-bottom: auto;
}

在这个例子中，请注意社交菜单与其父元素的底部边缘对齐。同样，这是通过向主菜单添加 margin-bottom: auto 来完成的。当然，我们也可以使用 flex-grow: 1，但这会增加菜单的高度。

CodePen 演示链接

需要注意的另一点是，如果我们在任何示例中定义 justify-content 属性，我们将不会看到任何视觉差异。发生这种情况是因为我们使用自动边距来对齐 flex 项目。只有当我们删除自动边距时，justify-content 属性才会生效。根据规范：

如果将自由空间分配给自动边距，则对齐属性在该维度上将不起作用，因为边距会在 flex 后剩余的所有自由空间中占据空间。

接下来，让我们创建标题的新变体：

毫无疑问，这可以通过将 justify-content: space-between 设置为 flex 容器来轻松实现。但是，我们再次能够使用自动边距来产生相同的布局。我们所要做的就是将 margin: 0 auto 应用于主菜单。

CodePen 演示链接

结论

在本文中，我们介绍了两个鲜为人知的 flexbox 提示。在结束之前，让我们回顾一下：

• 即使 flex 项目的 position 属性为 static，我们也可以将 z-index 属性应用于 flex 项目。
• 我们可以使用自动边距来实现 flex 项目沿主轴的自定义对齐。

如果您在项目中使用了这些技巧中的任何一个，请在下面的评论中告诉我们。

Flexbox 中 Z-Index 和自动边距的常见问题解答 (FAQ)

Flexbox 中的 Z-Index 是什么？它是如何工作的？

Z-Index 是一个 CSS 属性，用于控制重叠元素的垂直堆叠顺序。在 Flexbox 中，Z-Index 属性可用于控制 flex 项目沿 z 轴的顺序。重要的是要注意，Z-Index 仅适用于定位元素。默认值为 auto，这意味着堆叠顺序等于其父元素。如果为 Z-Index 分配一个正数，则该元素将位于父元素之上。

为什么我的 Z-Index 在 Flexbox 中不起作用？

您的 Z-Index 在 Flexbox 中不起作用可能有几个原因。一个常见的原因是 Z-Index 属性仅适用于定位元素。如果您的元素未定位（即，它的 position 值不是 relative、absolute 或 fixed），则 Z-Index 将没有任何效果。另一个原因可能是父元素设置了 Z-Index 值，这会影响子元素的堆叠顺序。

自动边距在 Flexbox 中是如何工作的？

在 Flexbox 中，自动边距具有特殊功能。它们可以吸收额外的空间并将相邻项目推开。当您在 flex 项目上设置自动边距时，它将占用沿主轴的任何剩余空间，从而有效地将其他项目推开。这对于在 flex 容器内对齐项目非常有用。

我可以使用 Z-Index 来控制 flex 项目的顺序吗？

是的，您可以使用 Z-Index 属性来控制 flex 项目沿 z 轴的顺序。但是，请记住，Z-Index 仅适用于定位元素。如果您的 flex 项目未定位，则 Z-Index 将没有任何效果。

为什么我的 flex 项目没有使用自动边距正确对齐？

如果您的 flex 项目没有使用自动边距正确对齐，则可能是由于几个原因。一个常见的原因是 flex 容器具有固定的高度或宽度，这会限制边距可用的空间。另一个原因可能是 flex 项目具有固定大小，这会阻止边距吸收额外的空间。

如何解决 Flexbox 中的 Z-Index 问题？

解决 Flexbox 中的 Z-Index 问题通常涉及确保您的元素已定位并且 Z-Index 值已正确设置。如果您的 Z-Index 不起作用，请检查您的元素是否已定位。如果不是，您可以通过设置 relative、absolute 或 fixed 的 position 值来定位它。此外，检查父元素的 Z-Index 值，因为它们会影响子元素的堆叠顺序。

我可以使用自动边距来居中 flex 项目吗？

是的，您可以使用自动边距在 flex 容器中居中 flex 项目。通过在 flex 项目的四面设置自动边距，它将在 flex 容器内垂直和水平居中。

Flexbox 中 Z-Index 的默认值是什么？

Flexbox 中 Z-Index 的默认值为 auto。这意味着 flex 项目的堆叠顺序等于其父元素。如果要更改堆叠顺序，可以为 Z-Index 分配正数或负数。

Z-Index 如何影响元素的堆叠顺序？

Z-Index 通过确定哪些元素出现在其他元素的顶部来影响元素的堆叠顺序。具有较高 Z-Index 值的元素将出现在具有较低 Z-Index 值的元素之上。如果两个元素具有相同的 Z-Index，则在 HTML 中后出现的元素将出现在顶部。

我可以将 Z-Index 与 Flexbox 一起使用来创建重叠元素吗？

是的，您可以将 Z-Index 属性与 Flexbox 一起使用来创建重叠元素。通过为您的 flex 项目分配不同的 Z-Index 值，您可以控制哪些项目出现在其他项目的顶部，从而创建重叠效果。请记住，Z-Index 仅适用于定位元素，因此您需要定位您的 flex 项目才能使 Z-Index 生效。

请注意，我已将所有图片链接保留为原始格式，并对文本进行了伪原创处理，力求在不改变原意的情况下，使文章表达方式更加多样化。 由于无法访问CodePen链接，我用“CodePen 演示链接”代替了原文中的链接。请自行替换为实际链接。

以上是快速提示：z索引和自动利润在flexbox中的工作方式的详细内容。更多信息请关注PHP中文网其他相关文章！