Flexbox 廣泛用於解決常見的佈局問題，例如粘性頁腳和等高列。除了這些功能外，它還提供了一些不太流行的其他實用功能。讓我們探索其中的兩個！
position 屬性設置為 static，Flexbox 也允許將 z-index 屬性應用於未定位的元素（例如 flex 項目）。這可以用來控制元素的堆疊順序。 flex-grow 屬性可能會產生不同的佈局結果，尤其是在元素的計算寬度或高度方面。選擇最符合所需佈局的方法至關重要。 您可能已經知道，z-index 屬性僅適用於定位元素。默認情況下，所有元素的 position 屬性都為 static，並且未定位。當元素的 position 屬性設置為 relative、absolute、fixed 或 sticky 時，該元素即為“定位”元素。
但是，未定位的元素（例如 flex 項目）也可以接收 z-index 屬性。 CSS 彈性盒佈局規範指出：
Flex 項目的繪製方式與內聯塊完全相同[CSS21]，不同之處在於使用順序修改的文檔順序代替原始文檔順序，並且即使
position為static，z-index值（非auto）也會創建一個堆疊上下文。
為了理解這種行為，請考慮以下示例：
在這裡，我們定義了兩個元素：.front 元素和 .back 元素。 .front 元素有一個子元素，一個帶有數字“1”的盒子。 .front 元素本身是絕對定位的。具體來說，它的 position 屬性為 fixed，並覆蓋整個視口。
我們的 .back 元素是一個 flex 容器。它包含兩個子元素——帶有數字“2”和“3”的盒子。根據我們上面討論的內容，我們可以設置其 flex 項目的 z-index 屬性，即使它們不是定位元素（即它們的 position 屬性為 static）。
請注意，當我們通過單擊上面的演示中的按鈕將 z-index: 2 添加到 flex 項目時，它們位於 .front 元素的頂部。
通過將自動邊距應用於 flex 項目，我們可以解決常見的 UI 模式。首先，讓我們假設我們想要構建這個典型的標題佈局：
要構建它，我們將使用 flexbox。不需要浮動、固定寬度或任何類似的東西。
這是我們的標記：
<header>
<nav>
<h1 class="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 時，其對應的寬度如下所示：
讓我們現在假設我們想要修改標題佈局。這是新的所需佈局：
標記保持不變。我們只需在 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，但這會增加菜單的高度。
需要注意的另一點是，如果我們在任何示例中定義 justify-content 屬性，我們將不會看到任何視覺差異。發生這種情況是因為我們使用自動邊距來對齊 flex 項目。只有當我們刪除自動邊距時，justify-content 屬性才會生效。根據規範：
如果將自由空間分配給自動邊距，則對齊屬性在該維度上將不起作用，因為邊距會在 flex 後剩餘的所有自由空間中佔據空間。
接下來，讓我們創建標題的新變體：
毫無疑問，這可以通過將 justify-content: space-between 設置為 flex 容器來輕鬆實現。但是，我們再次能夠使用自動邊距來產生相同的佈局。我們所要做的就是將 margin: 0 auto 應用於主菜單。
在本文中，我們介紹了兩個鮮為人知的 flexbox 提示。在結束之前，讓我們回顧一下：
position 屬性為 static，我們也可以將 z-index 屬性應用於 flex 項目。 如果您在項目中使用了這些技巧中的任何一個，請在下面的評論中告訴我們。
Z-Index 是一個 CSS 屬性，用於控制重疊元素的垂直堆疊順序。在 Flexbox 中，Z-Index 屬性可用於控制 flex 項目沿 z 軸的順序。重要的是要注意，Z-Index 僅適用於定位元素。默認值為 auto，這意味著堆疊順序等於其父元素。如果為 Z-Index 分配一個正數，則該元素將位於父元素之上。
您的 Z-Index 在 Flexbox 中不起作用可能有幾個原因。一個常見的原因是 Z-Index 屬性僅適用於定位元素。如果您的元素未定位（即，它的 position 值不是 relative、absolute 或 fixed），則 Z-Index 將沒有任何效果。另一個原因可能是父元素設置了 Z-Index 值，這會影響子元素的堆疊順序。
在 Flexbox 中，自動邊距具有特殊功能。它們可以吸收額外的空間並將相鄰項目推開。當您在 flex 項目上設置自動邊距時，它將佔用沿主軸的任何剩餘空間，從而有效地將其他項目推開。這對於在 flex 容器內對齊項目非常有用。
是的，您可以使用 Z-Index 屬性來控制 flex 項目沿 z 軸的順序。但是，請記住，Z-Index 僅適用於定位元素。如果您的 flex 項目未定位，則 Z-Index 將沒有任何效果。
如果您的 flex 項目沒有使用自動邊距正確對齊，則可能是由於幾個原因。一個常見的原因是 flex 容器具有固定的高度或寬度，這會限制邊距可用的空間。另一個原因可能是 flex 項目具有固定大小，這會阻止邊距吸收額外的空間。
解決 Flexbox 中的 Z-Index 問題通常涉及確保您的元素已定位並且 Z-Index 值已正確設置。如果您的 Z-Index 不起作用，請檢查您的元素是否已定位。如果不是，您可以通過設置 relative、absolute 或 fixed 的 position 值來定位它。此外，檢查父元素的 Z-Index 值，因為它們會影響子元素的堆疊順序。
是的，您可以使用自動邊距在 flex 容器中居中 flex 項目。通過在 flex 項目的四面設置自動邊距，它將在 flex 容器內垂直和水平居中。
Flexbox 中 Z-Index 的默認值為 auto。這意味著 flex 項目的堆疊順序等於其父元素。如果要更改堆疊順序，可以為 Z-Index 分配正數或負數。
Z-Index 通過確定哪些元素出現在其他元素的頂部來影響元素的堆疊順序。具有較高 Z-Index 值的元素將出現在具有較低 Z-Index 值的元素之上。如果兩個元素具有相同的 Z-Index，則在 HTML 中後出現的元素將出現在頂部。
是的，您可以將 Z-Index 屬性與 Flexbox 一起使用來創建重疊元素。通過為您的 flex 項目分配不同的 Z-Index 值，您可以控制哪些項目出現在其他項目的頂部，從而創建重疊效果。請記住，Z-Index 僅適用於定位元素，因此您需要定位您的 flex 項目才能使 Z-Index 生效。
請注意，我已將所有圖片鏈接保留為原始格式，並對文本進行了偽原創處理，力求在不改變原意的情況下，使文章表達方式更加多樣化。 由於無法訪問CodePen鏈接，我用“CodePen 演示鏈接”代替了原文中的鏈接。請自行替換為實際鏈接。
以上是快速提示：z索引和自動利潤在flexbox中的工作方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
