Chromium powoduje lukę Flexbox

Właściwość CSS gap jest dostępna w silnikach układu Flexbox i wielokolumnowego CSS w Chromium.

Adam Argyle

David Grogan

Różnica w usługach porównywania cen

Kluczowy termin: gap to odstęp między elementami podrzędnymi. Ten rodzaj odstępu jest czasami nazywany „marginesami” lub „przerwami”. Jest to przestrzeń, w której stykają się krawędzie pól dzieci.

gap jest względny, 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 lub direction, które ustawisz dla użytkowników z innych krajów. Znacznie ułatwia to rozwiązanie problemów z odstępami w przypadku komponentu i autora CSS. Dalsze zmniejszanie kodu.

Przerwa pokazująca obsługę lokalizacji, ponieważ uwzględnia zmiany kierunku i trybu pisania: Codepen | Tweet

Zgodność z przeglądarką

Browser Support

• 57
• 16
• 52
• 10.1

Source

Wykorzystanie

gap akceptuje jako wartość dowolną długość lub procent w CSS.

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

Wartość odstępu może być przekazywana jako 1 długość, która będzie używana zarówno w przypadku wierszy, jak i kolumn.

Shorthand

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

Ustawianie wierszy i kolumn razem

Rozwinięto

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

Właściwość gap może przyjmować 2 wartości długości, które będą używane w przypadku wierszy i kolumn.

Shorthand

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

Ustawianie wierszy i kolumn osobno jednocześnie

Rozwinięto

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

Flexbox gap

Zanim gap pojawił się w Flexboxie, strategie obejmowały ujemne marginesy, złożone selektory:last lub selektory pseudoklasy :first typu, a także inne sposoby zarządzania przestrzenią:last dynamicznie rozmieszczonego i zawijanego zestawu elementów podrzędnych.

Poprzednie próby

Poniżej znajdziesz wzorce, których użytkownicy używają do uzyskania odstępów podobnych do przerw.

selektory pseudoklas,

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

lobotomized owl

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

Źródło

Powyższe metody nie zastępują jednak w pełni gap i często wymagają dostosowania @media lub :lang(), aby uwzględnić scenariusze zawijania, tryby pisania lub kierunek. Dodanie 1–2 zapytań o media nie wydaje się problemem, ale może się ich nazbierać i doprowadzić do skomplikowanej logiki układu.

Autor powyższego przykładu chciał, aby żaden z elementów podrzędnych nie stykał się z innymi.

The Antidote: gap

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

Uwaga: własność odstępu przechodzi z elementu podrzędnego na nadrzędny.

W pierwszych 2 przykładach (bez Flexboxagap) elementy podrzędne są wyznaczane i przypisywane do nich odstępy od innych elementów. W przykładzie z luką na odtrutkę kontener określa odstępy. Każde dziecko może się pozbyć tego obowiązku, a jednocześnie scentralizować prawo własności do miejsca. Uproszczenie spójności. Zmień kolejność, zmień widoczne obszary, usuń elementy, dołącz nowe elementy itp., a odstępy pozostaną spójne. Żadnych nowych selektorów ani zapytań o media, tylko spacja.

Aktualizacje Narzędzi deweloperskich w Chromium

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

Narzędzia deweloperskie pokazują zarówno grid-gap, jak i gap, przy czym gap jest używane poniżej grid-gap, aby kaskada mogła korzystać z najnowszej składni.

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

Możliwości nowego układu

Dzięki Flexbox gap zyskujemy nie tylko wygodę. Umożliwiamy tworzenie zaawansowanych, idealnie rozmieszczonych układów wewnętrznych. W filmie i poniższym przykładowym kodzie widać, że siatka nie może osiągnąć układu, który jest możliwy w przypadku Flexboxa. Siatka musi mieć równą liczbę wierszy i kolumn, nawet jeśli są one przypisane wewnętrznie.

Tweetnij

Zwróć też uwagę, jak dynamiczne są odstępy między elementami podrzędnymi, gdy są one zawijane w sposób naturalny. Zapytania o media nie mogą wykrywać takich zawijań, aby wprowadzać inteligentne dostosowania. Flexbox gap może to zrobić za Ciebie we wszystkich wersjach językowych.

Wielokolumnowy gap

Oprócz tego, że Flexbox obsługuje składnię gap, układy wielokolumnowe również obsługują krótszą składnię gap.

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

Całkiem fajnie.