Chromium powoduje lukę Flexbox

Właściwość CSS gap służy do obsługi silników układu CSS Flexbox i Multi-Column w Chromium.

Adam Argyle
David Grogan
David Grogan
GitHub

CSS Gap

Wartość gap jest względna względem przepływu, co oznacza, że zmienia się dynamicznie w zależności od kierunku przepływu treści. Na przykład gap automatycznie dostosuje się do różnych wartości writing-mode i direction ustawionych przez Ciebie dla użytkowników z innych krajów. Dzięki temu autor komponentu i autor kodu CSS nie muszą się martwić o odstępy. Mniej skalowania kodu.

Przykład obsługi lokalizacji: Codepen | Tweet

Zgodność z przeglądarką

Obsługa przeglądarek

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1

Źródło

Wykorzystanie

gap może mieć dowolną wartość length lub percentage w CSS.

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


Odstęp może mieć długość 1, która będzie używana zarówno w wierszu, jak i w kolumnie.

Skrócony
.grid {
  display: grid;
  gap: 10px;
}
 Ustawianie wierszy i kolumn jednocześnie
Rozwinięto
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


Przerwa może mieć 2 długości, które będą używane w wierszu i kolumnie.

Skróty
.grid {
  display: grid;
  gap: 10px 5%;
}
 Ustaw jednocześnie wiersze i kolumny osobno
Rozwinięto
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Urządzenie Flexbox gap

Zanim gap pojawiła się w Flexboxie, strategie obejmowały ujemne marginesy, złożone selektory, :last lub :first typu pseudo-class, a także inne sposoby zarządzania przestrzenią dynamicznie rozmieszczanego i owijającego się zestawu elementów potomnych.

Poprzednie próby

Poniżej znajdują się wzorce stosowane przez użytkowników do uzyskiwania odstępów przypominających przerwy.

selektory pseudoklas,
.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}
sowa z wyciętym mózgiem
.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}
 Źródło

Nie zastępują one jednak w pełni gap i często wymagają dostosowania @media lub :lang(), aby uwzględnić zawinięcia, tryby pisania lub kierunek. Dodanie jednej lub dwóch zapytań o multimedia nie wydaje się być czymś złym, ale mogą się one sumować i prowadzić do skomplikowanej logiki układu.

Autor chciał, aby żaden z elementów podrzędnych się nie stykał.

Antidotum: luka

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

W pierwszych 2 przykladach (bez Flexboxa gap) dzieci są kierowane i przypisane do odstępu od innych elementów. W przykładzie przerwy antidotacja należy do kontenera. Każde dziecko może pozbyć się tego obowiązku, a także scentralizować zarządzanie odstępami. Upraszczanie spójności. Możesz zmieniać kolejność elementów, zmieniać widoki, usuwać elementy, dodawać nowe elementy itp., a odstępy pozostaną takie same. Brak nowych selektorów, brak nowych zapytań o multimedia, tylko miejsce.

Aktualizacje Chromium DevTools

Wraz z tymi aktualizacjami wprowadziliśmy zmiany w Narzędziach deweloperskich Chromium. Zwróć uwagę, jak panel Style obsługuje teraz grid-gap i gap 👍

Biuro z 2 osobami pracującymi przy stole.
Narzędzie deweloperskie wyświetla zarówno grid-gap, jak i gap, przy czym gap jest używany poniżej grid-gap, aby umożliwić kaskadowe używanie najnowszej składni.

Narzędzia deweloperskie obsługują zarówno grid-gap, jak i gap, ponieważ gap jest w istocie aliasem poprzednich składni.

Potencjał nowego układu

Dzięki Flexboxowi gap zapewniamy nie tylko wygodę. Odblokowujemy zaawansowane, idealnie rozmieszczone układy. W filmie i przykładowym kodzie poniżej widać, że Grid nie może uzyskać układu, który jest możliwy w przypadku Flexbox. Siatka musi mieć równą liczbę wierszy i kolumn, nawet jeśli są one przypisane wewnętrznie.

Tweetnij

Zwróć też uwagę na to, jak dynamiczne są odstępy między dziećmi, gdy zawijają się w ten sposób. Zapytania o multimedia nie mogą wykrywać takiego zawinięcia, aby dokonywać inteligentnych dostosowań. Flexbox gap może i będzie to robić w przypadku wszystkich wersji międzynarodowych.

Wielokolumnowy gap

Oprócz obsługi składni gap przez Flexbox układy wielokolumnowe obsługują też krótszą składnię gap.

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

Cudownie.