Schneller Tipp: Wie Z-Index und Automargen in Flexbox funktionieren

Flexbox wird häufig verwendet, um gemeinsame Layoutprobleme wie klebrige Fußzeilen und Kontursäulen zu lösen. Zusätzlich zu diesen Funktionen bietet es einige andere praktische Funktionen, die weniger beliebt sind. Lassen Sie uns zwei von ihnen erkunden!

Schlüsselpunkte

• Flexbox ermöglicht es, das Attribut position auf nicht lozierte Elemente (z. B. Flex -Projekte) angewendet zu werden, auch wenn das Attribut des Flex -Projekts auf static eingestellt ist. Dies kann verwendet werden, um die Stapelreihenfolge von Elementen zu steuern. z-index
automatische Margen in Flexbox können verwendet werden, um eine benutzerdefinierte Ausrichtung von Flex -Elementen entlang der Spindel zu implementieren. Sie absorbieren zusätzlichen Platz und schieben angrenzende Projekte weg, um ein einzigartiges UI -Muster zu ermöglichen.
Obwohl es visuell ähnlich aussieht, können die Verwendung automatischer Ränder und
• -Formen unterschiedliche Layoutergebnisse erzeugen, insbesondere in Bezug auf die berechnete Breite oder Höhe des Elements. Es ist wichtig, die Methode auszuwählen, die dem gewünschten Layout am besten entspricht. flex-grow

Flexbox und Z-Index

Sie wissen möglicherweise bereits, dass das Attribut

nur für die Positionierung von Elementen geeignet ist. Standardmäßig ist das z-index -Merkmal aller Elemente position und ist nicht positioniert. Wenn das Attribut static eines Elements auf position, relative, absolute oder fixed eingestellt ist, ist das Element das Element "Positionierung". sticky

Nicht lozierte Elemente (z. B. Flex -Elemente) können auch

Attribute empfangen. Die CSS -Layout -Spezifikation der CSS -Layout zeigt: z-index

Flex -Projekte sind genauso gezeichnet wie Inline -Blöcke [CSS21], außer dass die Reihenfolge des Dokuments in der Reihenfolge anstelle der Original -Dokumentreihenfolge geändert wird und selbst wenn

position der Wert von ist static (nicht z-index) erstellt auch einen Stapelkontext. auto

Um dieses Verhalten zu verstehen, betrachten Sie das folgende Beispiel:

codepen Demo Link

Hier definieren wir zwei Elemente:

Element und .front Element. .back Das Element hat ein untergeordnetes Element, ein Feld mit der Nummer "1". .front Das Element selbst ist absolut positioniert. Insbesondere ist sein .front Attribut position und deckt das gesamte Ansichtsfenster ab. fixed

Unser

Element ist ein Flex -Behälter. Es enthält zwei Kinderelemente - eine Box mit den Zahlen "2" und "3". Basierend auf dem, was wir oben diskutiert haben, können wir das .back -Merkmal seines Flex -Projekts festlegen, auch wenn sie keine Positionierungselemente sind (d. H. Ihr z-index -Merkmal ist position). static

Beachten Sie, dass beim Hinzufügen von

zum Flex -Projekt durch Klicken auf die Schaltfläche in der obigen Demo oben im Element z-index: 2 Sie sich befinden. .front

Flexbox und automatische Margen

Wir können gemeinsame UI -Muster lösen, indem wir automatische Margen auf Flex -Projekte anwenden. Nehmen wir zunächst an, wir möchten dieses typische Titellayout erstellen:

Um es zu erstellen, werden wir Flexbox verwenden. Keine Notwendigkeit für schwebende, feste Breite oder ähnliches.

Dies ist unsere Marke:

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

Unser CSS ist wie folgt:

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

In diesem Beispiel ist unser nav Element der Flex -Container, und das Logo, das Hauptmenü und das soziale Menü sind die Flex -Elemente. Wie aus der vorherigen Visualisierung hervorgeht, sind die ersten beiden Flex -Elemente entlang der Hauptachse auf der linken Seite des Flex -Behälters ausgerichtet. Stattdessen richtet sich das soziale Menü entlang der Hauptachse mit der rechten Kante seines übergeordneten Elements aus.

Eine Möglichkeit, diese benutzerdefinierte Ausrichtung zu erreichen, besteht darin, dem Hauptmenü margin-right: auto hinzuzufügen. Mit nur einer Codezeile können wir die Standardausrichtung des sozialen Menüs überschreiben und sie rechts von seinem Container vollständig schieben. In ähnlicher Weise verwenden wir die Eigenschaft align-self, um die Standardausrichtung des Flex -Elements entlang der Kreuzachse zu überschreiben.

Zusätzlich zu den automatischen Margen können wir auch eine zweite Methode verwenden, um das erforderliche Layout zu erstellen. Zunächst entfernen wir die Eigenschaft margin-right aus dem Hauptmenü und fügen flex-grow: 1 hinzu.

Auch wenn die Ergebnisse in beiden Fällen gleich aussehen, gibt es einen großen Unterschied. Mit der ersten Lösung hat unser Menü seine anfängliche berechnete Breite. Wenn beispielsweise die Ansichtsfenster -Breite 1100px ist, sieht die Menübreite wie folgt aus:

Andererseits wird die Menübreite mit der zweiten Lösung größer, da wir flex-grow: 1 angegeben haben. Wenn die Ansichtsfenster -Breite 1100px beträgt, ist die entsprechende Breite wie folgt:

codepen Demo Link

Nehmen wir nun an, wir möchten das Titellayout ändern. Hier ist das neue erforderliche Layout:

Die

-Marke bleibt gleich. Wir müssen nur einige Änderungen in CSS vornehmen:

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

Beachten Sie in diesem Beispiel, dass das soziale Menü mit der unteren Kante seines übergeordneten Elements übereinstimmt. Dies geschieht erneut, indem das Hauptmenü margin-bottom: auto hinzugefügt wird. Natürlich können wir auch flex-grow: 1 verwenden, aber dies erhöht die Höhe des Menüs.

codepen Demo Link

Eine andere Sache zu beachten ist, dass wir, wenn wir die Eigenschaft in einem Beispiel definieren, keine visuellen Unterschiede sehen werden. Dies geschieht, weil wir automatische Margen verwenden, um Flexgegenstände auszurichten. Das Attribut

wird nur dann wirksam, wenn wir den automatischen Rand löschen. Nach der Spezifikation: justify-content justify-content

Wenn der freie Speicherplatz automatische Ränder zugeordnet ist, funktioniert die Ausrichtung Eigenschaft in dieser Dimension nicht, da die Margen den Platz im gesamten freien Speicherplatz nach dem Flex Platz belegen.

Erstellen wir als nächstes eine neue Variante des Titels:

Dies kann leicht erreicht werden, indem

ohne Zweifel auf einen Flexbehälter eingestellt wird. Auch hier konnten wir automatische Ränder verwenden, um dasselbe Layout zu erzeugen. Wir müssen lediglich

auf das Hauptmenü anwenden. justify-content: space-between margin: 0 auto

codepen Demo Link

Schlussfolgerung

In diesem Artikel stellen wir zwei wenig bekannte Flexbox-Tipps vor. Bevor wir fertig sind, lesen wir:

Auch wenn die

Eigenschaft des Flex -Projekts
• ist, können wir das Attribut position auf das Flex -Projekt anwenden. static z-index Wir können automatische Margen verwenden, um die kundenspezifische Ausrichtung von Flex -Elementen entlang der Spindel zu erreichen.
Wenn Sie diese Tipps in Ihrem Projekt verwenden, teilen Sie uns dies in den Kommentaren unten mit.

FAQ für Z-Index und automatische Ränder in Flexbox

Was ist Z-Index in Flexbox? Wie funktioniert es?

ist ein CSS -Attribut, das die vertikale Stapelreihenfolge überlappender Elemente steuert. In Flexbox kann die Eigenschaft

verwendet werden, um die Reihenfolge zu steuern, in der Flex-Elemente entlang der Z-Achse liegen. Es ist wichtig zu beachten, dass Z-Index nur für die Positionierung von Elementen geeignet ist. Der Standardwert ist Z-Index, was bedeutet, dass die Stapelreihenfolge seinem übergeordneten Element entspricht. Wenn Z-Index eine positive Zahl zugeordnet ist, befindet sich das Element über dem übergeordneten Element. auto Z-Index Warum funktioniert mein Z-Index in Flexbox nicht?

Ihr

funktioniert aus mehreren Gründen in Flexbox nicht. Ein häufiger Grund ist, dass das

-Treizattribut nur für die Positionierung von Elementen geeignet ist. Wenn Ihr Element nicht positioniert ist (d. H. Sein Z-Index -Werwert ist nicht Z-Index, position oder relative), hat absolute keine Wirkung. Ein weiterer Grund kann sein, dass das übergeordnete Element einen fixed -Wertzahl hat, der die Stapelreihenfolge der Kinderelemente beeinflusst. Z-Index

Wie funktionieren die automatischen Margen in Flexbox?

In Flexbox haben automatische Margen spezielle Funktionen. Sie können zusätzlichen Raum absorbieren und angrenzende Projekte wegschieben. Wenn Sie einen automatischen Rand für ein Flex -Projekt festlegen, nimmt es den verbleibenden Platz entlang der Spindel ein und schiebt andere Projekte effektiv weg. Dies ist sehr nützlich, um Elemente in einem Flex -Behälter auszurichten.

Kann ich Z-Index verwenden, um die Reihenfolge der Flex-Elemente zu steuern?

Ja, Sie können die Eigenschaft Z-Index verwenden, um die Reihenfolge der Flex-Elemente entlang der Z-Achse zu steuern. Denken Sie jedoch daran, dass Z-Index nur für die Positionierung von Elementen geeignet ist. Wenn Ihr Flex -Projekt nicht positioniert ist, hat Z-Index keine Wirkung.

Warum ist mein Flex -Projekt nicht ordnungsgemäß mit den automatischen Rändern ausgerichtet?

Wenn Ihr Flex -Projekt nicht ordnungsgemäß mit den automatischen Margen ausgerichtet ist, kann dies aus mehreren Gründen liegen. Ein häufiger Grund dafür ist, dass der Flex -Behälter eine feste Höhe oder Breite aufweist, die den für die Ränder verfügbaren Raum einschränkt. Ein weiterer Grund könnte sein, dass das Flex -Projekt eine feste Größe hat, die verhindert, dass der Rand zusätzlichen Platz absorbiert.

Wie löst ich das Z-Index-Problem in Flexbox?

Lösen Sie das Problem Z-Index in Flexbox in der Regel sicher, dass Ihr Element positioniert ist und der Z-Index -Werwert korrekt eingestellt ist. Wenn Ihr Z-Index nicht funktioniert, überprüfen Sie, ob Ihr Element positioniert ist. Wenn nicht, können Sie es finden, indem Sie die Werte relative, absolute oder fixed festlegen. Überprüfen Sie auch die position -Werte des übergeordneten Elements, da sie die Stapelordnung der Kinderelemente beeinflussen. Z-Index

Kann ich automatische Ränder verwenden, um den Flex -Element zu zentrieren?

Ja, Sie können automatische Ränder verwenden, um Flexgegenstände im Flex -Behälter zu zentrieren. Durch die Festlegung automatischer Ränder auf allen Seiten des Flex -Projekts wird es vertikal und horizontal im Flex -Behälter zentriert.

Was ist der Standardwert von Z-Index in Flexbox?

Der Standardwert von

in Z-Index in Flexbox ist auto. Dies bedeutet, dass die Stapelreihenfolge des Flex -Elements seinem übergeordneten Element entspricht. Wenn Sie die Stapelreihenfolge ändern möchten, können Sie Z-Index positive oder negative Zahlen zuweisen.

Wie wirkt sich Z-Index auf die Stapelreihenfolge von Elementen aus?

Z-Index beeinflussen die Stapelreihenfolge der Elemente, indem er feststellt, welche Elemente auf anderen Elementen erscheinen. Elemente mit höheren Z-Index -Werten erscheinen über Elementen mit niedrigeren Z-Index -Werten. Wenn zwei Elemente das gleiche Z-Index haben, werden die Elemente, die nach HTML erscheinen, oben.

Kann ich Z-Index mit Flexbox verwenden, um überlappende Elemente zu erstellen?

Ja, Sie können das Attribut Z-Index mit FlexBox verwenden, um überlappende Elemente zu erstellen. Indem Sie Ihrem Flex -Projekt verschiedene Z-Index -Werte zuweisen, können Sie steuern, welche Elemente auf anderen Projekten angezeigt werden, wodurch überlappende Effekte erzeugt werden. Denken Sie daran, dass Z-Index nur für die Positionierung von Elementen geeignet ist. Daher müssen Sie Ihr Flex -Projekt positionieren, damit Z-Index wirksam wird.

Bitte beachten Sie, dass ich alle Bildlinks im ursprünglichen Format aufbewahrt habe und den Text pseudooriginalisiert habe, um den Artikel vielfältiger zu machen, ohne die ursprüngliche Bedeutung zu ändern. Da der CodePen -Link nicht zugänglich ist, habe ich den Link im Originaltext durch " codePen Demo Link " ersetzt. Bitte ersetzen Sie es durch den tatsächlichen Link selbst.

Das obige ist der detaillierte Inhalt vonSchneller Tipp: Wie Z-Index und Automargen in Flexbox funktionieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!