Chromium baut Flexbox-Lücke auf

Die CSS-Eigenschaft gap ist für die CSS-Flexbox- und Mehrspalten-Layout-Engines von Chromium vorgesehen.

Adam Argyle

David Grogan

Preisvergleichsportal-Lücke

gap ist flow-relative, d. h. er ändert sich je nach Richtung des Inhaltsflusses dynamisch. So wird gap beispielsweise automatisch an die verschiedenen writing-mode- oder direction-Werte angepasst, die Sie für Ihre internationalen Nutzer festgelegt haben. Dadurch werden die Probleme bei der Abstände zwischen der Komponente und dem CSS-Autor erheblich entlastet. Weniger Code skaliert weiter.

Browserkompatibilität

Nutzung

gap akzeptiert als Wert jede CSS-Länge oder Prozentzahl.

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

Für „Gap“ kann eine Länge von „1“ übergeben werden, die sowohl für Zeilen als auch für Spalten verwendet wird.

.grid {
  display: grid;
  gap: 10px;
}

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}

Für „Lücke“ können zwei Längen übergeben werden, die für Zeile und Spalte verwendet werden.

.grid {
  display: grid;
  gap: 10px 5%;
}

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

Bevor gap in Flexbox eingeführt wurde, wurden negative Ränder, komplexe Auswahlen, Pseudoklassenauswahlen vom Typ :last oder :first oder andere Mittel verwendet, um den Raum für dynamisch angeordnete und umgebrochene untergeordnete Elemente zu verwalten.

Vorherige Versuche

Die folgenden Muster wurden verwendet, um Lücken zu erzeugen.

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}

Die oben genannten Optionen sind jedoch kein vollständiger Ersatz für gap. Oft müssen @media oder :lang() angepasst werden, um Umbruchsszenarien, Schreibmodi oder -richtungen zu berücksichtigen. Das Hinzufügen einer oder zwei Mediaabfragen scheint nicht so schlimm zu sein, aber sie können sich summieren und zu einer komplizierten Layoutlogik führen.

Der oben genannte Autor wollte eigentlich, dass sich keine der untergeordneten Elemente überschneiden.

The Antidote: gap

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

In den ersten beiden Beispielen (ohne Flexbox gap) werden die untergeordneten Elemente ausgerichtet und ihnen wird ein Abstand zu anderen Elementen zugewiesen. Im Beispiel für die Antidot-Lücke ist der Container für den Abstand verantwortlich. Jedes Kind kann sich von der Last befreien und gleichzeitig die Berechtigung zur Platzierung zentralisieren. Vereinfachung der Konsistenz. Sie können Ansichten neu anordnen, ändern, Elemente entfernen, neue Elemente anhängen usw., und das Raster bleibt dabei konsistent. Keine neuen Selektoren, keine neuen Medienabfragen, nur Speicherplatz.

Updates für Chromium-Entwicklertools

Diese Updates bringen Änderungen an den Chromium-Entwicklertools mit sich. Sehen Sie sich an, wie grid-gap und gap jetzt im Bereich Styles dargestellt werden. 👍

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

Neue Layoutoptionen

Mit Flexbox gap bieten wir nicht nur mehr Komfort. Wir schaffen leistungsstarke, perfekt ausbalancierte, inhärente Layouts. Im Video und im folgenden Codebeispiel unten kann Grid das Layout nicht erzielen, das mit Flexbox möglich ist. Zeilen und Spalten des Rasters müssen gleich sein, auch wenn sie unveränderlich sind.

Beachten Sie auch, wie dynamisch der Abstand zwischen untergeordneten Elementen ist, wenn sie intrinsisch so umschlossen werden. Mediaabfragen können das nicht erkennen und keine intelligenten Anpassungen vornehmen. Flexbox gap kann und wird dies für Sie bei allen Internationalisierungen tun.

gap mit mehreren Spalten

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

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

Ganz schön cool.