Chromium baut Flexbox-Lücke auf

Die CSS-Eigenschaft gap ist für die CSS-Flexbox- und mehrspaltigen Layout-Engines von Chromium verfügbar.

Adam Argyle
Grogan
David Grogan
GitHub

Lücke im Preisvergleichsportal

gap ist Ablauf relativ, d. h., er ändert sich dynamisch je nach Richtung des Inhaltsflusses. gap passt sich z. B. automatisch an die verschiedenen writing-mode- oder direction-Werte an, die Sie für Ihre internationalen Nutzer festlegen. Dies entlastet die Komponente und den CSS-Autor erheblich, wenn es um Leerzeichen geht. Weniger weitere Codeskalierung.

Lücke zur Unterstützung der Lokalisierung, da sie Änderungen an Richtung und Schreibmodus verarbeitet: Codepen | Tweet

Browserkompatibilität

Unterstützte Browser

  • 57
  • 16
  • 52
  • 10.1

Quelle

Nutzung

gap akzeptiert jedes CSS-Attribut length oder percentage als Wert.

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}


Es kann eine Lücke mit einer Länge übergeben werden, die sowohl für die Zeile als auch für die Spalte verwendet wird.

Kurzschrift
.grid {
  display: grid;
  gap: 10px;
}
Zeilen und Spalten gemeinsam gleichzeitig festlegen
Maximiert
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


Es können 2 Längen übergeben werden, die für die Zeile und die Spalte verwendet werden.

Kurzschrift
.grid {
  display: grid;
  gap: 10px 5%;
}
Zeilen und Spalten gleichzeitig separat festlegen
Maximiert
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

Bevor gap in der Flexbox verwendet wurde, umfassten Strategien negative Ränder, komplexe Selektoren, Pseudoklassenselektoren vom Typ :last oder :first oder andere Methoden, um den Bereich eines dynamisch angeordneten und umgebenden Satzes von untergeordneten Elementen zu verwalten.

Vorherige Versuche

Die folgenden Muster wurden bereits verwendet, um lückeähnliche Abstände zu erhalten.

Pseudoklassenselektoren
.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}
Lobotomisierte Eule
.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}
Quelle

Die obigen sind jedoch kein vollständiger Ersatz für gap und erfordern häufig @media- oder :lang()-Anpassungen, um Wrapping-Szenarien, Schreibmodi oder Richtungen zu berücksichtigen. Ein oder zwei Medienabfragen hinzuzufügen, scheint nicht schlecht, aber sie können sich summieren und zu einer komplizierten Layoutlogik führen.

Der obige Autor sollte eigentlich keines der untergeordneten Elemente berühren.

Der Gegenmittel: Gap

.layout {
  display: flex;
  gap: 10px;
}

In den ersten beiden Beispielen (ohne Flexbox gap) werden die untergeordneten Elemente ausgewählt und Abstände von anderen Elementen zugewiesen. Im Beispiel einer Gegenmittellücke ist der Container für den Abstand verantwortlich. Jedes Kind kann sich von der Last entlasten und gleichzeitig die Rechte für den Abstand zentralisieren. Vereinfachung der Einheitlichkeit Darstellungsbereiche neu anordnen, ändern, Elemente entfernen, neue Elemente anhängen usw. und die Abstände einheitlich bleiben. Keine neuen Selektoren, keine neuen Medienabfragen, nur Speicherplatz.

Updates für die Chromium-Entwicklertools

Diese Updates umfassen Änderungen an den Chromium-Entwicklertools. Im Bereich Styles werden jetzt grid-gap und gap verarbeitet. 👍

Ein Büro mit zwei Personen, die an einem Tisch arbeiten.
Die Entwicklertools zeigen sowohl grid-gap als auch gap, wobei gap unter grid-gap verwendet wird, damit die Kaskade die neueste Syntax verwenden kann.

Die Entwicklertools unterstützen sowohl grid-gap als auch gap, da gap im Wesentlichen ein Alias für die vorherigen Syntaxen ist.

Potenzial für neues Layout

Mit der Flexbox gap ist mehr als nur Komfort möglich. Wir schalten leistungsstarke, intrinsische Layouts mit perfekten Abständen. Im Video und im folgenden Codebeispiel unten kann Grid nicht das Layout erreichen, das Flexbox kann. Das Raster muss gleich viele Zeilen und Spalten haben, auch wenn sie prinzipiell zugewiesen sind.

Tweet

Achten Sie auch darauf, wie dynamisch der Abstand zwischen den Kindern ist, wenn sie sich in die gleiche Richtung umschließen. Medienabfragen können solche Umbrüche nicht erkennen und intelligente Anpassungen vornehmen. Die Flexbox gap übernimmt und wird dies für dich bei allen Internationalisierungen erledigen.

Mehrspaltig gap

Neben der Flexbox, die die gap-Syntax unterstützt, unterstützen mehrspaltige Layouts auch die kürzere gap-Syntax.

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

Ziemlich cool.