FlexBoxは、スティッキーフッターや輪郭列などの一般的なレイアウトの問題を解決するために広く使用されています。これらの機能に加えて、人気が低い他の実用的な機能を提供します。それらの2つを探索しましょう！
static属性を解除された要素（Flexプロジェクトなど）に適用できます。これを使用して、要素の積み重ね順序を制御できます。 z-index
FlexBoxの自動マージンを使用して、スピンドルに沿ってフレックスアイテムのカスタムアライメントを実装できます。彼らは余分なスペースを吸収し、隣接するプロジェクトを押しのけて、ユニークなUIパターンを可能にします。 flex-grow
属性はz-indexであり、配置されていません。要素のposition属性がstatic、position、relative、またはabsoluteに設定されている場合、要素は「位置決め」要素です。 fixed
ただし、stickyでは、解除されていない要素（フレックスアイテムなど）も
z-indexフレックスプロジェクトは、インラインブロック[CSS21]とまったく同じ方法で描画されます。ただし、ドキュメントの順序が元のドキュメント注文の代わりに順番に変更され、
であっても、の値は（not
Codepenデモリンクposition）もスタッキングコンテキストを作成します。staticz-indexこの動作を理解するには、次の例を検討してくださいauto
ここでは、
要素と要素の2つの要素を定義します。 要素には、子要素、番号「1」のあるボックスがあります。
要素自体は絶対に配置されています。具体的には、その属性は.frontであり、ビューポート全体をカバーしています。 .back
.front私たちの.front要素はフレックス容器です。数字「2」と「3」のボックスという2つの子要素が含まれています。上記で説明したことに基づいて、たとえそれらが要素を配置していなくても、Flexプロジェクトのposition属性を設定できます（つまり、fixed属性は
.back上記のデモのボタンをクリックしてFlexプロジェクトに追加すると、それらはz-index要素の上にあることに注意してください。 position
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;
}
このカスタムアラインメントを実現する1つの方法は、メインメニューにnavを追加することです。コードの1行だけを使用すると、ソーシャルメニューのデフォルトのアラインメントをオーバーライドし、コンテナの右側に完全にプッシュできます。同様に、
margin-right: auto自動マージンに加えて、2番目の方法を使用して必要なレイアウトを構築することもできます。最初に、メインメニューからalign-selfプロパティを削除し、
margin-right両方の場合に結果が同じように見えても、大きな違いがあります。最初のソリューションを使用すると、メニューには最初の計算幅があります。たとえば、ビューポート幅が1100pxの場合、メニュー幅は次のようになります。
flex-grow: 1
一方、2番目のソリューションを使用すると、
を指定したため、メニューの幅が大きくなります。ビューポート幅が1100pxの場合、対応する幅は次のとおりです。 
flex-grow: 1Codepenデモリンク
タイトルレイアウトを変更したいと仮定しましょう。新しい必要なレイアウトは次のとおりです
マークは同じままです。 CSSにいくつかの変更を加える必要があります：
この例では、ソーシャルメニューは親要素の下端に合わせていることに注意してください。繰り返しになりますが、これはメインメニューに
を追加することによって行われます。もちろん、を使用することもできますが、これによりメニューの高さが増加します。 
Codepenデモリンク
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;
}プロパティを定義する場合、視覚的な違いが表示されないことです。これは、自動マージンを使用してフレックスアイテムを合わせるために発生します。 justify-content属性は、自動マージンを削除する場合にのみ有効になります。仕様に応じて：justify-content
自動マージンに空きスペースが割り当てられている場合、マージンはフレックス後に残ったすべての空きスペースにスペースを占有するため、アライメントプロパティはその次元で機能しません。次に、タイトルの新しいバリアントを作成しましょう：
を設定することで簡単に実現できます。ただし、繰り返しますが、自動マージンを使用して同じレイアウトを作成することができました。私たちがしなければならないのは、メインメニューにjustify-content: space-betweenを適用することだけです。 margin: 0 auto
Flexプロジェクトの
position
static自動マージンを使用して、スピンドルに沿ってフレックスアイテムのカスタムアライメントを実現できます。 z-index
FlexBoxのZ-Indexとは何ですか？それはどのように機能しますか？
は、重複する要素の垂直スタッキング順序を制御するCSS属性です。 FlexBoxでは、です。つまり、スタッキング順序はその親要素に等しくなります。正の数値がZ-Indexに割り当てられている場合、要素は親要素の上になります。 Z-Index
Z-Indexなぜ私のZ-IndexがFlexBoxで動作しないのですか？ auto
Z-Index
、Z-Index、またはZ-Indexではない場合）、positionは効果がありません。もう1つの理由は、親要素がrelative値セットを持っていることであり、子要素の積み重ね順に影響します。 absolute
Z-Indexを使用してフレックスアイテムの順序を制御できますか？
Z-Indexは位置付け要素にのみ適していることを忘れないでください。 Flexプロジェクトが配置されていない場合、Z-Indexは効果がありません。 Z-Index
なぜ私のフレックスプロジェクトが自動マージンと適切に整合していないのですか？ FlexBoxでZ-Indexの問題を解決する方法は？
問題を解決するには、通常、要素が配置され、Z-Index値が正しく設定されていることを確認することが含まれます。 Z-Indexが機能しない場合は、要素が配置されているかどうかを確認してください。そうでない場合は、Z-Index、relative、またはabsolute値を設定して見つけることができます。また、子要素が子要素の積み重ね順に影響を与えるため、親要素のfixed値を確認してください。 position
Z-Index自動マージンを使用してフレックスアイテムを中央に配置できますか？
FlexBoxのZ-Indexのデフォルト値は何ですか？
FlexBoxののデフォルト値はです。これは、フレックスアイテムのスタッキング順序がその親要素に等しいことを意味します。スタッキング順序を変更する場合は、正または負の数値をZ-Indexに割り当てることができます。 auto
Z-Index Z-Indexは、要素の積み重ね順序にどのような影響を与えますか？
を持っている場合、HTMLの後に表示される要素が上部に表示されます。 Z-Index
はい、FlexBoxを使用してZ-Index属性を使用して、重複する要素を作成できます。 FLEXプロジェクトに異なるZ-Index値を割り当てることにより、他のプロジェクトの上に表示されるアイテムを制御し、重複する効果を作成できます。 Z-Indexは位置付け要素のみに適しているため、Z-Indexのために有効にするためにFlexプロジェクトを配置する必要があることを忘れないでください。
すべての画像リンクを元の形式で保持し、テキストを擬似オリジナルにして、元の意味を変えずに記事をより多様にするよう努めていることに注意してください。 CodePenリンクにはアクセスできないため、元のテキストのリンクを「Codepen Demoリンク
以上がクイックヒント：Z-IndexとAutoマージンがFlexBoxでどのように機能するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
