Właściwość CSS gap
jest dostępna w silnikach Chromium z układem CSS Flexbox i wieloma kolumnami.
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.