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

Schlüsselbegriff: gap ist der Abstand zwischen den untergeordneten Elementen. Sie haben vielleicht schon von dieser Art von Abständen gehört, die als „Rinnen“ oder „Gasse“ bezeichnet werden. Es ist nur der Abstand zwischen den Rändern der Kinderboxen.

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.

Verbesserungspotenzial bei der Lokalisierung bei Änderungen der Richtung und des Schreibmodus: Codepen | Tweet

Browserkompatibilität

Unterstützte Browser

• 57
• 16
• 52
• 10.1

Quelle

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.

Kurzschreibweise

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

So legen Sie sowohl Zeilen als auch Spalten gleichzeitig fest

Maximiert

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

Kurzschrift

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

Zeilen und Spalten separat gleichzeitig festlegen

Maximiert

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

Pseudoklassen-Selektoren

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

lobotomisierte Eule

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

Quelle

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

Hinweis : Die Inhaberschaft des Abstands wird vom untergeordneten Element auf das übergeordnete Element übertragen.

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

In den Devtools werden sowohl grid-gap als auch gap angezeigt. gap wird unter grid-gap verwendet, damit die Kaskade die neueste Syntax verwendet.

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.

Tweet

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.