クイックヒント：Z-IndexとAutoマージンがFlexBoxでどのように機能するか

FlexBoxは、スティッキーフッターや輪郭列などの一般的なレイアウトの問題を解決するために広く使用されています。これらの機能に加えて、人気が低い他の実用的な機能を提供します。それらの2つを探索しましょう！

キーポイント

• FlexBoxを使用すると、Flex Projectのpositionに設定されていても、static属性を解除された要素（Flexプロジェクトなど）に適用できます。これを使用して、要素の積み重ね順序を制御できます。 z-index FlexBoxの自動マージンを使用して、スピンドルに沿ってフレックスアイテムのカスタムアライメントを実装できます。彼らは余分なスペースを吸収し、隣接するプロジェクトを押しのけて、ユニークなUIパターンを可能にします。
• 視覚的に似ているように見えますが、自動マージンと
プロパティを使用すると、特に要素の計算された幅または高さの観点から、異なるレイアウト結果が生成されます。目的のレイアウトに最適な方法を選択することが重要です。
• flex-grow
flexboxおよびz-index

属性は、要素の配置にのみ適していることを既に知っているかもしれません。デフォルトでは、すべての要素の

属性はz-indexであり、配置されていません。要素のposition属性がstatic、position、relative、またはabsoluteに設定されている場合、要素は「位置決め」要素です。 fixed ただし、stickyでは、解除されていない要素（フレックスアイテムなど）も

属性を受信できます。 CSS Elastic Box Layoutの仕様は、次のように指摘しています

z-indexフレックスプロジェクトは、インラインブロック[CSS21]とまったく同じ方法で描画されます。ただし、ドキュメントの順序が元のドキュメント注文の代わりに順番に変更され、

is

であっても、の値は

（notposition）もスタッキングコンテキストを作成します。 static z-index この動作を理解するには、次の例を検討してください auto

Codepenデモリンク

ここでは、

要素と要素の2つの要素を定義します。 要素には、子要素、番号「1」のあるボックスがあります。

要素自体は絶対に配置されています。具体的には、その

属性は.frontであり、ビューポート全体をカバーしています。 .back .front私たちの.front要素はフレックス容器です。数字「2」と「3」のボックスという2つの子要素が含まれています。上記で説明したことに基づいて、たとえそれらが要素を配置していなくても、Flexプロジェクトのposition属性を設定できます（つまり、fixed属性は

）。

.back上記のデモのボタンをクリックしてFlexプロジェクトに追加すると、それらはz-index要素の上にあることに注意してください。 position

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;
}

要素はフレックスコンテナであり、ロゴ、メインメニュー、ソーシャルメニューはフレックスアイテムです。以前の視覚化からわかるように、最初の2つのフレックスアイテムは、メイン軸に沿ってフレックス容器の左側に並んでいます。代わりに、ソーシャルメニューは、メイン軸に沿って親要素の右端に合わせます。

このカスタムアラインメントを実現する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;
}

注意すべきもう1つのことは、どの例でも

プロパティを定義する場合、視覚的な違いが表示されないことです。これは、自動マージンを使用してフレックスアイテムを合わせるために発生します。 justify-content属性は、自動マージンを削除する場合にのみ有効になります。仕様に応じて：justify-content

自動マージンに空きスペースが割り当てられている場合、マージンはフレックス後に残ったすべての空きスペースにスペースを占有するため、アライメントプロパティはその次元で機能しません。

次に、タイトルの新しいバリアントを作成しましょう：

これは、間違いなくフレックス容器に

を設定することで簡単に実現できます。ただし、繰り返しますが、自動マージンを使用して同じレイアウトを作成することができました。私たちがしなければならないのは、メインメニューにjustify-content: space-betweenを適用することだけです。 margin: 0 auto

Codepenデモリンク

結論

この記事では、この記事では、あまり知られていない2つのFlexBoxのヒントを紹介します。終了する前に、レビューしましょう：

Flexプロジェクトの

プロパティであっても、
• であっても、Flex Projectに属性を適用できます。 position static自動マージンを使用して、スピンドルに沿ってフレックスアイテムのカスタムアライメントを実現できます。 z-index
• プロジェクトでこれらのヒントのいずれかを使用している場合は、以下のコメントでお知らせください。
Z-IndexのFAQおよびFlexBoxの自動マージンのFAQ

FlexBoxのZ-Indexとは何ですか？それはどのように機能しますか？

は、重複する要素の垂直スタッキング順序を制御するCSS属性です。 FlexBoxでは、

プロパティを使用して、Z軸に沿ってフレックスアイテムがある順序を制御できます。

は、要素の配置にのみ適していることに注意することが重要です。デフォルトの値は

です。つまり、スタッキング順序はその親要素に等しくなります。正の数値がZ-Indexに割り当てられている場合、要素は親要素の上になります。 Z-Index Z-Indexなぜ私のZ-IndexがFlexBoxで動作しないのですか？ auto Z-Index

いくつかの理由でFlexBoxで動作しません。一般的な理由は、

属性が位置付け要素のみに適していることです。要素が配置されていない場合（つまり、その

値が

、Z-Index、またはZ-Indexではない場合）、positionは効果がありません。もう1つの理由は、親要素がrelative値セットを持っていることであり、子要素の積み重ね順に影響します。 absolute

FlexBoxで自動マージンはどのように機能しますか？

FlexBoxでは、自動マージンには特別な機能があります。追加のスペースを吸収し、隣接するプロジェクトを押しのけることができます。 Flexプロジェクトに自動マージンを設定すると、スピンドルに沿って残りのスペースを占め、他のプロジェクトを効果的に押しのけます。これは、フレックスコンテナ内のアイテムを調整するのに非常に便利です。

Z-Indexを使用してフレックスアイテムの順序を制御できますか？

はい、プロパティを使用できます。ただし、Z-Indexは位置付け要素にのみ適していることを忘れないでください。 Flexプロジェクトが配置されていない場合、Z-Indexは効果がありません。 Z-Index なぜ私のフレックスプロジェクトが自動マージンと適切に整合していないのですか？

Flexプロジェクトが自動マージンと適切に整合していない場合、いくつかの理由が原因である可能性があります。一般的な理由は、フレックス容器に固定された高さまたは幅があることであり、マージンが利用できるスペースを制限します。もう1つの理由は、Flexプロジェクトのサイズが固定されており、マージンが余分なスペースを吸収するのを防ぐことです。

FlexBoxでZ-Indexの問題を解決する方法は？

FlexBoxの

問題を解決するには、通常、要素が配置され、Z-Index値が正しく設定されていることを確認することが含まれます。 Z-Indexが機能しない場合は、要素が配置されているかどうかを確認してください。そうでない場合は、Z-Index、relative、またはabsolute値を設定して見つけることができます。また、子要素が子要素の積み重ね順に影響を与えるため、親要素のfixed値を確認してください。 position Z-Index自動マージンを使用してフレックスアイテムを中央に配置できますか？

はい、自動マージンを使用して、フレックスコンテナのフレックスアイテムを中心にすることができます。 Flexプロジェクトのすべての側面に自動マージンを設定することにより、フレックスコンテナ内で垂直および水平に中央に配置されます。

FlexBoxのZ-Indexのデフォルト値は何ですか？

FlexBoxの

のデフォルト値は

です。これは、フレックスアイテムのスタッキング順序がその親要素に等しいことを意味します。スタッキング順序を変更する場合は、正または負の数値をZ-Indexに割り当てることができます。 auto Z-Index Z-Indexは、要素の積み重ね順序にどのような影響を与えますか？

他の要素の上に表示される要素を決定することにより、要素の積み重ね順序に影響します。値が高い要素は、値が低い要素の上に表示されます。 2つの要素が同じ

を持っている場合、HTMLの後に表示される要素が上部に表示されます。 Z-Index

FlexBoxでZ-Indexを使用して重複する要素を作成できますか？

はい、FlexBoxを使用してZ-Index属性を使用して、重複する要素を作成できます。 FLEXプロジェクトに異なるZ-Index値を割り当てることにより、他のプロジェクトの上に表示されるアイテムを制御し、重複する効果を作成できます。 Z-Indexは位置付け要素のみに適しているため、Z-Indexのために有効にするためにFlexプロジェクトを配置する必要があることを忘れないでください。

すべての画像リンクを元の形式で保持し、テキストを擬似オリジナルにして、元の意味を変えずに記事をより多様にするよう努めていることに注意してください。 CodePenリンクにはアクセスできないため、元のテキストのリンクを「Codepen Demoリンク

以上がクイックヒント：Z-IndexとAutoマージンがFlexBoxでどのように機能するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。