快速提示：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中文網其他相關文章！