Chromium baut Flexbox-Lücke auf

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

Adam Argyle

David Grogan

Lücke bei Preisvergleichsportalen

Schlüsselbegriff : gap ist der Abstand zwischen untergeordneten Elementen. Vielleicht haben Sie schon von dieser Art von Abstand als „Bundsteg“ oder „Spalte“ gehört. Es ist nur der Bereich, in dem sich die Kanten der Kinderbox berühren.

gap ist ablaufbezogen. Das bedeutet, dass sich die Variable dynamisch ändert, je nachdem, in welche Richtung der Inhalt fließt. Der Wert gap wird beispielsweise automatisch an die verschiedenen writing-mode- oder direction-Werte angepasst, die Sie für Ihre internationalen Nutzer festlegen. Dies erleichtert die Arbeit des Komponenten- und CSS-Autors erheblich. Weniger Code-Skalierung.

Lücke, die die Unterstützung der Lokalisierung demonstriert, da Änderungen an Richtung und Schreibmodus berücksichtigt werden: Codepen | Tweet

Browserkompatibilität

Browser Support

• 57
• 16
• 52
• 10.1

Source

Nutzung

gap akzeptiert als Wert eine beliebige CSS-Länge oder einen Prozentsatz.

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

Für „gap“ kann ein Längenwert übergeben werden, der sowohl für Zeile als auch Spalte verwendet wird.

Kurzschreibweise

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

Sowohl Zeilen als auch Spalten gleichzeitig festlegen

Maximiert

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

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

Kurzschreibweise

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

Sowohl Zeilen als auch Spalten gleichzeitig festlegen

Maximiert

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

Flexbox gap

Bevor gap in Flexbox verfügbar war, wurden negative Ränder, komplexe Selektoren, :last oder :first-Pseudoklassenselektoren oder andere Methoden verwendet, um den Abstand einer dynamisch angeordneten und umgebrochenen Gruppe von untergeordneten Elementen zu verwalten.

Vorherige Versuche

Im Folgenden finden Sie Muster, die verwendet wurden, um eine lückenartige Formatierung zu erzielen.

Pseudoklassenselektoren

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

lobotomierte Eule

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

Quelle

Die oben genannten Methoden sind jedoch kein vollständiger Ersatz für gap und erfordern häufig Anpassungen von @media oder :lang(), um Wrapping-Szenarien, Schreibmodi oder die Schreibrichtung zu berücksichtigen. Das Hinzufügen von ein oder zwei Media-Queries scheint nicht so schlimm zu sein, aber sie können sich summieren und zu einer komplizierten Layoutlogik führen.

Der Autor wollte eigentlich, dass sich die untergeordneten Elemente nicht berühren.

The Antidote: gap

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

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

In den ersten beiden Beispielen (ohne Flexbox gap) werden die untergeordneten Elemente angesprochen und erhalten einen Abstand zu anderen Elementen. Im Beispiel für die Lücke zwischen den Gegenmitteln ist der Container für den Abstand verantwortlich. So kann jedes Kind die Belastung reduzieren und gleichzeitig die Inhaberschaft für den Abstand zentralisieren. Vereinfachung der Konsistenz. Sie können Elemente neu anordnen, Viewports ändern, Elemente entfernen, neue Elemente anhängen usw. und der Abstand bleibt konsistent. Keine neuen Selektoren, keine neuen Media-Anfragen, nur Leerzeichen.

Updates für die Chromium-Entwicklertools

Mit diesen Updates werden auch Änderungen an den Chromium-Entwicklertools eingeführt. Beachten Sie, wie der Bereich Styles jetzt grid-gap und gap verarbeitet. 👍

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

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

Neues Layoutpotenzial

Mit Flexbox gap bieten wir mehr als nur Komfort. Wir ermöglichen leistungsstarke, perfekt angeordnete, intrinsische Layouts. Im Video und im folgenden Codebeispiel ist zu sehen, dass mit Grid das Layout, das mit Flexbox möglich ist, nicht erreicht werden kann. Das Raster muss gleich viele Zeilen und Spalten haben, auch wenn sie intrinsisch zugewiesen sind.

Tweet

Beachten Sie auch, wie dynamisch der Abstand zwischen den untergeordneten Elementen ist, wenn sie auf diese Weise umgebrochen werden. Media-Queries können solche Umbrüche nicht erkennen, um intelligente Anpassungen vorzunehmen. Flexbox gap kann und wird das für Sie in allen Internationalisierungen übernehmen.

Mehrspaltige gap

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

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

Ziemlich cool.