Sich um die 'Lücke' kümmern

Das CSS gap -Attribut ist nicht neu, aber letztes Jahr hat es eine große neue Funktion: Jetzt funktioniert es nicht nur für CSS -Netze, sondern auch für Flexbox. Angesichts dessen und ich denke, dass die Eigenschaft komplexer ist als es scheint, möchte ich genau überprüfen und erklären, wie es funktioniert.

Schauen wir uns gap und ihre damit verbundenen Eigenschaften genauer an und verstehen, wie und wo sie funktionieren.

Alle Gap -Eigenschaften

Lassen Sie uns zunächst alle CSS -Eigenschaften von gap -bezogenen CSS überprüfen. Insgesamt gibt es sechs: insgesamt:

• grid-row-gap
• grid-column-gap
• grid-gap
• row-gap
• column-gap
• gap

Aus dieser Liste können wir die ersten drei Eigenschaften ignorieren. grid-* wurde frühzeitig bei der Ausarbeitung der CSS-Gitterspezifikation hinzugefügt und später veraltet, als gap allgemeiner wurde. Browser unterstützen diese veralteten grid-* (zum Zeitpunkt dieser Schrift) und behandeln sie nur als Nicht- grid- Präfixe. Daher entspricht grid-gap wie gap , grid-column-gap entspricht der column-gap . grid-row-gap entspricht row-gap .

Was die anderen drei Eigenschaften betrifft, wenn man bedenkt, gap eine Abkürzung ist, die es Ihnen ermöglicht, die beiden anderen Eigenschaften anzugeben, müssen wir wirklich nur wissen, welche row-gap und column-gap tun.

Unser Verständnis dieser Eigenschaften hängt von der Art des CSS -Layouts ab, das wir verwenden. Schauen wir uns zuerst diese Optionen an.

Wo kann Lücke verwendet werden?

Wenn Sie wie ich sind, haben Sie gap in Gitterlayouts verwendet, aber jetzt kann sie auch in Flexbox sowie in mehrspaltigen Layouts verwendet werden. Lassen Sie uns jede Situation überprüfen.

Gitterlücken

Alle Browser unterstützen gap in Netzlayouts und sind in diesem Zusammenhang sehr leicht zu verstehen.

• row-gap führt Platz zwischen Zeilenspuren ein
• column-gap führt Platz zwischen den Spaltenbahnen ein

Erstellen wir ein Raster mit drei Spalten und zwei Zeilen:

 <code>.container { display: grid; grid-template-columns: 200px 100px 300px; grid-template-rows: 100px 100px; }</code>

Dies gibt uns das folgende Netz:

Die Linien in der obigen Abbildung werden als Gitterlinien bezeichnet, die die Spuren (Zeilen und Spalten) des Gitters trennen. Diese Linien existieren nicht wirklich im Netz - sie sind unsichtbar, haben keine Dicke und sind normalerweise das, was Devtools anzeigen, wenn wir den Gitterinspektor (in Safari, Firefox, Kante oder Chrom) ermöglichen.

Wenn wir dem Raster jedoch Lücken hinzufügen, funktioniert es genau so, wie diese Linien die Dicke bekommen.

Fügen wir eine 20px -Lücke hinzu:

 <code>.container { display: grid; grid-template-columns: 200px 100px 300px; grid-template-rows: 100px 100px; gap: 20px; }</code>

Jetzt sind die Grenzen zwischen unseren Spuren 20px dick, sodass das Netzprojekt weiter drücken.

Es ist erwähnenswert, dass die Tracks immer noch die gleiche Größe haben (definiert durch grid-template-* Eigenschaft).

In einem Raster wird immer zwischen Zeilenspuren row-gap angewendet. Wenn wir also im obigen Beispiel gap durch row-gap ersetzen, erhalten wir:

Und column-gap wird immer zwischen Säulenspuren angewendet, sodass das Ersetzen gap durch column-gap die folgenden Ergebnisse erzeugt:

Das Raster ist einfach, da die Spalten standardmäßig vertikal und die Zeilen horizontal sind, genau wie in einer Tabelle. Daher ist es leicht zu erinnern, wo sich die Anwendungen column-gap und row-gap befinden.

Jetzt wird die Dinge bei der Verwendung writing-mode etwas komplizierter. Der Standard -Schreibmodus im Netzwerk ist der horizontale Modus von links nach rechts, aber es gibt auch einen vertikalen Schreibmodus, in diesem Fall werden die Spalten horizontal und die Zeilen vertikal. Achten Sie immer auf writing-mode , da dies es weniger intuitiv machen kann, wie es normalerweise ist.

Dies ist ein guter Übergang zum nächsten Abschnitt, da Spalten und Zeilen in Flexbox neue Bedeutungen erhalten.

Flexbox -Lücken

Lassen Sie uns über Lücken im Flexbox -Layout sprechen, in dem die Dinge ein bisschen komplizierter werden. Wir werden das folgende Beispiel verwenden:

 <code>.container { display: flex; }</code>

Dies gibt uns standardmäßig einen Zeilenflexbehälter, was bedeutet, dass Elemente im Container auf derselben horizontalen Linie von links nach rechts gestapelt sind.

In diesem Fall wird column-gap zwischen den Projekten angewendet, und row-gap hat keinen Einfluss. Dies liegt daran, dass es nur eine Zeile (oder eine Linie) gibt. Aber jetzt lassen wir einige Lücken zwischen Projekten hinzufügen:

 <code>.container { display: flex; column-gap: 10px; }</code>

Schalten wir nun flex-direction des Containers in eine Spalte um, die die Elemente mit dem folgenden Code vertikal von oben nach unten stapelt:

 <code>.container { display: flex; flex-direction: column; column-gap: 10px; }</code>

Was passiert als nächstes:

Die Lücke verschwand. Auch wenn column-gap zwischen den Elementen hinzufügen, wenn sich der Container in Zeilenrichtung befindet, funktioniert er nicht mehr in Spaltenrichtung.

Wir müssen row-gap verwenden, um es abzurufen. Alternativ können wir eine gap -Abkürzung mit einem Wert verwenden, der die gleiche Lücke in beide Richtungen anwendet, sodass sie in beiden Fällen funktioniert.

 <code>.container { display: flex; flex-direction: column; gap: 10px; }</code>

Insgesamt funktioniert row-gap column-gap immer vertikal (unter der Annahme des Standard writing-mode ) immer horizontal. Dies hängt nicht von der Ausrichtung des Flex -Behälters ab.

Schauen Sie sich jetzt jedoch die Beispiele an, die Linienbrüche beinhalten:

 <code>.container { display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 10px; justify-content: center; }</code>

Wenn der Speicherplatz nicht ausreicht, um alles in einer Zeile zu halten, können wir das Projekt mit flex-wrap: wrap in mehreren Zeilen auf mehreren Zeilen einwickeln.

In diesem Fall wird column-gap immer noch vertikal zwischen Projekten angewendet und zwischen zwei row-gap horizontal angewendet.

Es gibt einen interessanten Unterschied zwischen diesem und dem Netz. Säulenlücken richten sich nicht unbedingt über Flexreihen aus. Dies liegt daran, dass justify-content: center das Projekt innerhalb seiner Flex-Linie zentrieren. Auf diese Weise können wir sehen, dass jede Flex -Zeile ein separates Layout mit Lücken ist, die unabhängig von anderen Zeilen angewendet werden.

Mehrere Spaltenlücken

Multikolen sind ein Layouttyp, der es für den automatischen Fließen von Inhalten zwischen mehreren Spalten erleichtert, wie Sie es in herkömmlichen Zeitungsartikeln erwarten würden. Wir setzen die Anzahl der Spalten und setzen die Größe für jede Spalte.

Die Lücken in einem Multi-Säulen-Layout funktionieren nicht so gut wie ein Gitter oder eine Flexbox. Es gibt drei bemerkenswerte Unterschiede:

• row-gap hat keine Wirkung.
• column-gap hat einen Standardwert, der nicht 0 ist,
• Die Lücke kann gestylt werden.

Lassen Sie es uns nacheinander nacheinander brechen. Erstens hat row-gap keine Wirkung. In einem Multi-Säulen-Layout müssen keine Zeilen getrennt werden. Dies bedeutet, dass nur column-gap verwandt ist (und gap -Abkürzung).

Zweitens beträgt der Standardwert der column-gap im Multi-Säulen-Layout im Gegensatz zu Gitter und Flexbox 1EM (statt 0). Selbst wenn überhaupt keine Lücke angegeben ist, sind die Inhaltsspalten immer noch visuell getrennt. Natürlich kann es standardmäßig außer Kraft gesetzt werden, aber dies ist ein guter Standard.

Hier ist der Code, auf dem das Beispiel basiert:

 <code>.container { column-count: 3; padding: 1em; }</code>

Schließlich können wir den Raum zwischen den Spalten in einem mehrspaltigen Layout stylen. Wir verwenden column-rule , die ähnlich wie border funktioniert:

 <code>.container { column-count: 3; column-gap: 12px; column-rule: 4px solid red; padding: 12px; }</code>

Browserunterstützung

gap wurde in allen Aspekten gut unterstützt. Es gibt weitere Informationen zu Caniuse, aber kurz: Kurz gesagt:

• Flexbox: gap wird überall, außer dem Internet Explorer (kurz davor zu werden), Opera Mini und UC -Browser für Android unterstützt. Caniuse hat eine globale Unterstützungsrate von 87,31%.
• Grid: Ebenso, aber wir sehen eine globale Zustimmungsrate von 93,79%.
• Mehrere Spalten: Ähnlich, aber nicht in Safari unterstützt, mit einer globalen Unterstützungsrate von 75,59%.

Insgesamt wird gap -Eigentum gut unterstützt und in den meisten Fällen ist keine Problemumgehung erforderlich.

Stellen Sie den Stil der Lücke zwischen Flex und Grid fest

Es wird sehr nützlich sein, die Lücke zwischen Flexbox und CSS -Netz zu stylen. Leider wird es heute nirgendwo unterstützt. Die gute Nachricht ist jedoch, dass es in naher Zukunft realisiert werden kann. Dies wurde in der CSS -Arbeitsgruppe diskutiert und wird in Firefox entwickelt. Sobald wir effektive Implementierungs- und Spezifikationsvorschläge in Firefox haben, kann dies die Implementierungen in anderen Browsern vorantreiben.

In der Zwischenzeit gibt es einige Lösungen.

Eine Möglichkeit besteht darin, dem Gitterbehälter die Hintergrundfarbe zu verleihen, dem Projekt dann eine andere Farbe zu geben und schließlich eine Lücke zu hinterlassen, damit die Behälterfarbe angezeigt wird.

Dies funktioniert zwar, aber wir können keine Lücken nutzen, um Platz zwischen Projekten einzuführen. Die Lücke fungiert hier als Grenzbreite. Um die Gegenstände so deutlicher zu trennen, müssen wir Polster oder Ränder für die Artikel verwenden, was nicht ideal ist… wie wir im nächsten Abschnitt sehen werden.

Kann ich nicht einfach Marge oder Polsterung verwenden?

Ja, in den meisten Fällen können wir auch margin (und/oder padding ) verwenden, um zwischen Layoutelementen einen visuellen Raum hinzuzufügen. Aber gap hat mehrere Vorteile.

Erstens wird die Lücke auf Containerebene definiert. Dies bedeutet, dass wir sie für das gesamte Layout einmal definieren und sie immer konsequent im Layout angewendet werden. Verwenden Sie die Margen, die für jeden Artikel deklariert werden müssen. Dies kann kompliziert werden, wenn das Projekt unterschiedlich ist oder von verschiedenen wiederverwendbaren Komponenten stammt.

Das Wichtigste ist, dass gap nur eine einzelne Codezeile erfordert, um standardmäßig die richtige Operation durchzuführen. Wenn wir beispielsweise versuchen, einen Platz zwischen Flexprojekten einzubringen, anstatt sie zu umgeben, benötigen die Margen besondere Umstände, um die zusätzliche Marge vor dem ersten Projekt und den zusätzlichen Rand nach dem letzten Projekt zu entfernen. Mit Lücken müssen wir dies nicht tun.

Mit margin: 0 20px bei jedem Flex -Projekt erhalten wir:

Mit gap: 40px im Container erhalten wir jedoch:

Auch in Gitterlayouts ist es viel einfacher und besser, Lücken auf Containerebene zu definieren, als die Ränder an jedem Gegenstand zu definieren und die an Netzkanten angewendeten Ränder zu berücksichtigen.

Verwenden Sie margin: 20px bei jedem Grid -Projekt:

Verwenden Sie stattdessen gap: 40px auf dem Gitterbehälter:

Anhäufung des leeren Raums

Basierend auf allem, was bisher gesagt wurde, müssen margin und gap nicht gegenseitig ausgeschlossen sein. Tatsächlich gibt es viele Möglichkeiten, die Projekte des Layouts weiter zu trennen, und alle arbeiten gut zusammen.

gap -Eigenschaft ist nur ein Teil des leeren Raums zwischen Kästchen im Layout -Container. margin , padding und Ausrichtung können gap lückengebundenen Raum erhöhen.

Betrachten wir ein Beispiel, in dem wir ein einfaches Flex-Layout mit einer bestimmten Breite, einer Lücke, einer gewissen Inhaltsverteilung (mit justify-content ) sowie einigen Margen und Padding erstellen:

 <code>.container { display: flex; gap: 40px; width: 900px; justify-content: space-around; } .item { padding: 20px; margin: 0 20px; }</code>

Nehmen wir an, dieser Code liefert die folgenden Ergebnisse:

Schauen wir uns nun genau an, wie der leere Speicherplatz zwischen Projekten erstellt wird:

Wie wir sehen können, gibt es zwischen zwei aufeinanderfolgenden Flex -Projekten vier verschiedene Arten von Leerzeichen:

• Zwischen zwei aufeinanderfolgenden Projekten definiert die Lücke den Mindestraum zwischen diesen Projekten. Es mag mehr Platz geben, wie in diesem Fall, aber es wird niemals weniger Platz geben.
• Die Margen drücken das Projekt weiter, aber im Gegensatz zu Lücken fügt es auf beiden Seiten aller Projekte Platz hinzu.
• Das Füllen bietet einen gewissen Platz in jedem Projekt.
• Schließlich und nur, wenn genügend Platz übrig ist, nimmt die Inhaltsverteilung die Elemente in der Flex-Zeile basierend auf space-around in Kraft und verteilt gleichmäßig.

Debugging Lücke

Lassen Sie uns mit einem Thema enden, das mir sehr nahe kommt: Devtools Unterstützung für Debug -Lücken. Es wird immer Fehler geben, und es ist sehr erfreulich zu wissen, dass Devtools uns unterstützen können, aber wir müssen wissen, welche Tools uns helfen können.

Für gap kann ich mir zwei spezifische Funktionen vorstellen, die sehr nützlich sein können.

Ist meine Lücke gültig?

Sofern wir keine gap falsch geschrieben haben oder einen ungültigen Wert angeben, wird diese Eigenschaft immer auf die Seite angewendet. Zum Beispiel ist dies richtig:

 <code>.some-class { display: block; gap: 3em; }</code>

Es wird nichts bewirken, aber es ist gültig CSS und der Browser hat nichts ausmacht, dass gap nicht mit Blocklayouts funktioniert. Firefox verfügt jedoch über eine Funktion namens "inaktives CSS", die dies tut: Es kümmert sich um effektive CSS, die auf Dinge angewendet werden, die sinnvoll sind. In diesem Fall zeigt Firefox Devtools eine Warnung im Inspektor an.

Wo ist meine Lücke?

Chrome und Microsoft Edge haben auch eine sehr nützliche Funktion des Debugging Gap. Es wurde durch eine Zusammenarbeit zwischen Microsoft und Google hinzugefügt, um Layout -Debugging -Tools in Chromium zu erstellen, einem Open -Source -Projekt, das sowohl Browser als auch andere Browser unterstützt. In diesen Browsern können Sie im Styles -Panel über verschiedene Eigenschaften schweben und sehen, wie sie sich auf die Seite auswirken.

Das war's. Ich hoffe, dieser Artikel hilft dabei, einige Details zu verstehen, wie die Mittelklappen in CSS funktionieren.

Das obige ist der detaillierte Inhalt vonSich um die 'Lücke' kümmern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!