Chromium powoduje lukę Flexbox

Właściwość CSS gap jest dostępna w silnikach Chromium z układem CSS Flexbox i wieloma kolumnami.

Adam Argyle

David Grogan

Luka w usłudze porównywania cen

gap ma charakter 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 i direction ustawionych dla użytkowników międzynarodowych. Znacznie ułatwia to zadanie stosowania odstępów między autorami komponentu i kodu CSS. Mniej skalowania kodu.

Zgodność z przeglądarką

Wykorzystanie

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

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

Luka może mieć 1 długość, która zostanie wykorzystana zarówno w wierszu, jak i w kolumnie.

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

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

Luka może mieć 2 długości, która będzie używana w wierszu i kolumnie.

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

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

Flexbox gap

Zanim gap był dostępny w Flexbox, strategie obejmowały ujemne marże, złożone selektory, pseudoklasy typu :last lub :first oraz inne sposoby zarządzania przestrzenią dynamicznie umieszczanego i pakującego zestawu elementów podrzędnych.

Poprzednie próby

Poniżej przedstawiono wzorce, z których ludzie korzystają do uzyskiwania odstępów przypominających przerwy.

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

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

Powyższe instrukcje nie zastępują jednak gap i często wymagają poprawek @media lub :lang() w celu uwzględnienia scenariuszy zawijania tekstu, trybów pisania lub kierunku tekstu. Dodanie 1 lub 2 zapytań o multimedia to nie nic złego, ale mogą się sumować i prowadzić do skomplikowanej logiki układu.

Celem powyższego autora było pilnowanie, by żaden z elementów podrzędnych nie był stymulowany.

Antidotum: luka

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

W pierwszych 2 przykładach (bez Flexbox gap) elementy podrzędne są kierowane i przypisywane do nich odstępy od innych elementów. W przykładzie luki antidotum właścicielem odstępu jest kontener. Każde dziecko może uwolnić się od tych uciążliwości, a jednocześnie scentralizować własność odstępów. Zwiększenie spójności. Możesz zmieniać kolejność elementów, zmieniać widoczne obszary, usuwać elementy, dołączać nowe elementy itp., przy czym odstępy są spójne. Brak nowych selektorów i zapytań o multimedia, tylko spacja.

Aktualizacje Narzędzi deweloperskich w Chromium

W wyniku tych aktualizacji w Narzędziach deweloperskich w Chromium pojawiły się zmiany. Warto zwrócić uwagę, jak panel Style obsługuje teraz grid-gap i gap 👍

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

Nowy potencjał układu

Flexbox gap to więcej niż wygoda. Odblokowujemy zaawansowane i idealnie rozmieszczone układy. W tym filmie i poniższym przykładowym kodzie siatka nie może osiągnąć układu, który umożliwia Flexbox. Siatka musi mieć równe wiersze i kolumny, nawet jeśli są one z nich związane.

Zwróćcie uwagę, jak dynamiczny jest odstęp między dziećmi, Zapytania o multimedia nie są w stanie wykryć takiego pakowania na potrzeby inteligentnych korekt. Urządzenie Flexbox gap może i zrobi to za Ciebie we wszystkich wersjach językowych.

Wielokolumnowy gap

Poza składnią gap układy wielokolumnowe obsługują też krótszą składnię gap.

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

Kiepska zabawa.