Flexbox 廣泛用於解決常見的佈局問題，例如粘性頁腳和等高列。除了這些功能外，它還提供了一些不太流行的其他實(shí)用功能。讓我們探索其中的兩個(gè)！

關(guān)鍵要點(diǎn)

• 即使 flex 項(xiàng)目的 position 屬性設(shè)置為 static，F(xiàn)lexbox 也允許將 z-index 屬性應(yīng)用於未定位的元素（例如 flex 項(xiàng)目）。這可以用來控制元素的堆疊順序。
• Flexbox 中的自動邊距可用於實(shí)現(xiàn) flex 項(xiàng)目沿主軸的自定義對齊。它們吸收額外的空間並將相鄰項(xiàng)目推開，從而實(shí)現(xiàn)獨(dú)特的 UI 模式。
• 儘管視覺上看起來相似，但使用自動邊距和 flex-grow 屬性可能會產(chǎn)生不同的佈局結(jié)果，尤其是在元素的計(jì)算寬度或高度方面。選擇最符合所需佈局的方法至關(guān)重要。

Flexbox 和 z-index

您可能已經(jīng)知道，z-index 屬性僅適用於定位元素。默認(rèn)情況下，所有元素的 position 屬性都為 static，並且未定位。當(dāng)元素的 position 屬性設(shè)置為 relative、absolute、fixed 或 sticky 時(shí)，該元素即為“定位”元素。

但是，未定位的元素（例如 flex 項(xiàng)目）也可以接收 z-index 屬性。 CSS 彈性盒佈局規(guī)範(fàn)指出：

Flex 項(xiàng)目的繪製方式與內(nèi)聯(lián)塊完全相同[CSS21]，不同之處在於使用順序修改的文檔順序代替原始文檔順序，並且即使position 為static，z-index 值（非auto）也會創(chuàng)建一個(gè)堆疊上下文。

為了理解這種行為，請考慮以下示例：

CodePen 演示鏈接

在這裡，我們定義了兩個(gè)元素：.front 元素和 .back 元素。 .front 元素有一個(gè)子元素，一個(gè)帶有數(shù)字“1”的盒子。 .front 元素本身是絕對定位的。具體來說，它的 position 屬性為 fixed，並覆蓋整個(gè)視口。

我們的 .back 元素是一個(gè) flex 容器。它包含兩個(gè)子元素——帶有數(shù)字“2”和“3”的盒子。根據(jù)我們上面討論的內(nèi)容，我們可以設(shè)置其 flex 項(xiàng)目的 z-index 屬性，即使它們不是定位元素（即它們的 position 屬性為 static）。

請注意，當(dāng)我們通過單擊上面的演示中的按鈕將 z-index: 2 添加到 flex 項(xiàng)目時(shí)，它們位於 .front 元素的頂部。

Flexbox 和自動邊距

通過將自動邊距應(yīng)用於 flex 項(xiàng)目，我們可以解決常見的 UI 模式。首先，讓我們假設(shè)我們想要構(gòu)建這個(gè)典型的標(biāo)題佈局：

要構(gòu)建它，我們將使用 flexbox。不需要浮動、固定寬度或任何類似的東西。

這是我們的標(biāo)記：

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

我們的 CSS 如下所示：

header {
  background: http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
}

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

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

在這個(gè)例子中，我們的 nav 元素是 flex 容器，logo、主菜單和社交菜單是 flex 項(xiàng)目。從之前的可視化可以看出，前兩個(gè) flex 項(xiàng)目沿主軸與 flex 容器的左側(cè)對齊。相反，社交菜單沿主軸與其父元素的右邊緣對齊。

實(shí)現(xiàn)這種自定義對齊的一種方法是向主菜單添加 margin-right: auto。只需一行代碼，我們就可以覆蓋社交菜單的默認(rèn)對齊方式，並將其完全推到其容器的右側(cè)。類似地，我們使用 align-self 屬性來覆蓋 flex 項(xiàng)目沿交叉軸的默認(rèn)對齊方式。

除了自動邊距外，我們還可以使用第二種方法來構(gòu)建所需的佈局。首先，我們從主菜單中刪除 margin-right 屬性，然後向其添加 flex-grow: 1。

即使在這兩種情況下結(jié)果看起來相同，也存在一個(gè)很大的區(qū)別。使用第一種解決方案，我們的菜單具有其初始計(jì)算寬度。例如，當(dāng)視口寬度為 1100px 時(shí)，菜單寬度將如下所示：

另一方面，使用第二種解決方案，菜單寬度會變大，因?yàn)槲覀冎付?flex-grow: 1。當(dāng)視口寬度為 1100px 時(shí)，其對應(yīng)的寬度如下所示：

CodePen 演示鏈接

讓我們現(xiàn)在假設(shè)我們想要修改標(biāo)題佈局。這是新的所需佈局：

標(biāo)記保持不變。我們只需在 CSS 中進(jìn)行一些更改：

nav {
  background: http://www.miracleart.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;
}

在這個(gè)例子中，請注意社交菜單與其父元素的底部邊緣對齊。同樣，這是通過向主菜單添加 margin-bottom: auto 來完成的。當(dāng)然，我們也可以使用 flex-grow: 1，但這會增加菜單的高度。

CodePen 演示鏈接

需要注意的另一點(diǎn)是，如果我們在任何示例中定義 justify-content 屬性，我們將不會看到任何視覺差異。發(fā)生這種情況是因?yàn)槲覀兪褂米詣舆吘鄟韺R flex 項(xiàng)目。只有當(dāng)我們刪除自動邊距時(shí)，justify-content 屬性才會生效。根據(jù)規(guī)範(fàn)：

如果將自由空間分配給自動邊距，則對齊屬性在該維度上將不起作用，因?yàn)檫吘鄷?flex 後剩餘的所有自由空間中佔(zhàn)據(jù)空間。

接下來，讓我們創(chuàng)建標(biāo)題的新變體：

毫無疑問，這可以通過將 justify-content: space-between 設(shè)置為 flex 容器來輕鬆實(shí)現(xiàn)。但是，我們再次能夠使用自動邊距來產(chǎn)生相同的佈局。我們所要做的就是將 margin: 0 auto 應(yīng)用於主菜單。

CodePen 演示鏈接

結(jié)論

在本文中，我們介紹了兩個(gè)鮮為人知的 flexbox 提示。在結(jié)束之前，讓我們回顧一下：

• 即使 flex 項(xiàng)目的 position 屬性為 static，我們也可以將 z-index 屬性應(yīng)用於 flex 項(xiàng)目。
• 我們可以使用自動邊距來實(shí)現(xiàn) flex 項(xiàng)目沿主軸的自定義對齊。

如果您在項(xiàng)目中使用了這些技巧中的任何一個(gè)，請?jiān)谙旅娴脑u論中告訴我們。

Flexbox 中 Z-Index 和自動邊距的常見問題解答 (FAQ)

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

Z-Index 是一個(gè) CSS 屬性，用於控制重疊元素的垂直堆疊順序。在 Flexbox 中，Z-Index 屬性可用於控制 flex 項(xiàng)目沿 z 軸的順序。重要的是要注意，Z-Index 僅適用於定位元素。默認(rèn)值為 auto，這意味著堆疊順序等於其父元素。如果為 Z-Index 分配一個(gè)正數(shù)，則該元素將位於父元素之上。

為什麼我的 Z-Index 在 Flexbox 中不起作用？

您的 Z-Index 在 Flexbox 中不起作用可能有幾個(gè)原因。一個(gè)常見的原因是 Z-Index 屬性僅適用於定位元素。如果您的元素未定位（即，它的 position 值不是 relative、absolute 或 fixed），則 Z-Index 將沒有任何效果。另一個(gè)原因可能是父元素設(shè)置了 Z-Index 值，這會影響子元素的堆疊順序。

自動邊距在 Flexbox 中是如何工作的？

在 Flexbox 中，自動邊距具有特殊功能。它們可以吸收額外的空間並將相鄰項(xiàng)目推開。當(dāng)您在 flex 項(xiàng)目上設(shè)置自動邊距時(shí)，它將佔(zhàn)用沿主軸的任何剩餘空間，從而有效地將其他項(xiàng)目推開。這對於在 flex 容器內(nèi)對齊項(xiàng)目非常有用。

我可以使用 Z-Index 來控制 flex 項(xiàng)目的順序嗎？

是的，您可以使用 Z-Index 屬性來控制 flex 項(xiàng)目沿 z 軸的順序。但是，請記住，Z-Index 僅適用於定位元素。如果您的 flex 項(xiàng)目未定位，則 Z-Index 將沒有任何效果。

為什麼我的 flex 項(xiàng)目沒有使用自動邊距正確對齊？

如果您的 flex 項(xiàng)目沒有使用自動邊距正確對齊，則可能是由於幾個(gè)原因。一個(gè)常見的原因是 flex 容器具有固定的高度或?qū)挾龋@會限制邊距可用的空間。另一個(gè)原因可能是 flex 項(xiàng)目具有固定大小，這會阻止邊距吸收額外的空間。

如何解決 Flexbox 中的 Z-Index 問題？

解決 Flexbox 中的 Z-Index 問題通常涉及確保您的元素已定位並且 Z-Index 值已正確設(shè)置。如果您的 Z-Index 不起作用，請檢查您的元素是否已定位。如果不是，您可以通過設(shè)置 relative、absolute 或 fixed 的 position 值來定位它。此外，檢查父元素的 Z-Index 值，因?yàn)樗鼈儠绊懽釉氐亩询B順序。

我可以使用自動邊距來居中 flex 項(xiàng)目嗎？

是的，您可以使用自動邊距在 flex 容器中居中 flex 項(xiàng)目。通過在 flex 項(xiàng)目的四面設(shè)置自動邊距，它將在 flex 容器內(nèi)垂直和水平居中。

Flexbox 中 Z-Index 的默認(rèn)值是什麼？

Flexbox 中 Z-Index 的默認(rèn)值為 auto。這意味著 flex 項(xiàng)目的堆疊順序等於其父元素。如果要更改堆疊順序，可以為 Z-Index 分配正數(shù)或負(fù)數(shù)。

Z-Index 如何影響元素的堆疊順序？

Z-Index 通過確定哪些元素出現(xiàn)在其他元素的頂部來影響元素的堆疊順序。具有較高 Z-Index 值的元素將出現(xiàn)在具有較低 Z-Index 值的元素之上。如果兩個(gè)元素具有相同的 Z-Index，則在 HTML 中後出現(xiàn)的元素將出現(xiàn)在頂部。

我可以將 Z-Index 與 Flexbox 一起使用來創(chuàng)建重疊元素嗎？

是的，您可以將 Z-Index 屬性與 Flexbox 一起使用來創(chuàng)建重疊元素。通過為您的 flex 項(xiàng)目分配不同的 Z-Index 值，您可以控制哪些項(xiàng)目出現(xiàn)在其他項(xiàng)目的頂部，從而創(chuàng)建重疊效果。請記住，Z-Index 僅適用於定位元素，因此您需要定位您的 flex 項(xiàng)目才能使 Z-Index 生效。

請注意，我已將所有圖片鏈接保留為原始格式，並對文本進(jìn)行了偽原創(chuàng)處理，力求在不改變原意的情況下，使文章表達(dá)方式更加多樣化。 由於無法訪問CodePen鏈接，我用“CodePen 演示鏈接”代替了原文中的鏈接。請自行替換為實(shí)際鏈接。

以上是快速提示：z索引和自動利潤在flexbox中的工作方式的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！