La proprietà CSS gap
è disponibile per i motori di layout CSS Flexbox e multi-colonna di Chromium.
Gap CSS
gap
è relativo al flusso, il che significa che cambia in modo dinamico in base alla direzione del flusso di contenuti. Ad esempio, gap
si adatterà automaticamente
per i diversi valori di writing-mode
o direction
che hai impostato per gli
utenti internazionali. Questo riduce notevolmente il carico di sfide relative agli spazi
per il componente e l'autore CSS. Ulteriore scalabilità del codice.
Compatibilità del browser
Utilizzo
gap
accetta qualsiasi lunghezza
o percentuale CSS come valore.
.gap-example {
display: grid;
gap: 10px;
gap: 2ch;
gap: 5%;
gap: 1em;
gap: 3vmax;
}
Il divario può essere superato di 1 lunghezza, che sarà utilizzata sia per la riga che per la colonna.
.grid { display: grid; gap: 10px; }
.grid { display: grid; row-gap: 10px; column-gap: 10px; }
Il divario può essere superato di 2 lunghezze, che verranno utilizzate per riga e colonna.
.grid { display: grid; gap: 10px 5%; }
.grid { display: grid; row-gap: 10px; column-gap: 5%; }
Flexbox gap
Prima che gap
fosse in Flexbox, le strategie prevedevano margini negativi, selettori complessi, selettori di pseudo-classi di tipo :last
o :first
o altri mezzi per gestire lo spazio di un insieme di elementi secondari disposti in modo dinamico.
Tentativi precedenti
Di seguito sono riportati alcuni schemi utilizzati dalle persone per ottenere uno spazio vuoto.
.layout > :not(:last-child) { margin-bottom: 10px; margin-right: 10px; }
.layout > * + * { margin-bottom: 10px; margin-right: 10px; }
I valori precedenti non sostituiscono completamente gap
e spesso richiedono modifiche di @media
o :lang()
per tenere conto di scenari di wrapping, modalità di scrittura o direzione.
L'aggiunta di una o due query supporti non sembra così male, ma può sommarsi e portare a una logica di layout complicata.
Quello che l'autore di cui sopra intendeva consistere invece nel non toccare gli elementi secondari.
L'antidoto: lacuna
.layout {
display: flex;
gap: 10px;
}
Nei primi due esempi (senza Flexbox gap
), agli elementi secondari viene scelto come target e viene assegnata una spaziatura dagli altri elementi. Nell'esempio del divario antidoto, è il container a possedere la spaziatura. Ogni bambino può alleggerire il carico e centralizzare anche la proprietà dello spazio. Semplificazione della coerenza. Riordinare,
modificare le aree visibili, rimuovere elementi, aggiungere nuovi elementi e così via). Inoltre, gli spazi rimangono coerenti. Nessun nuovo selettore, nessuna nuova query multimediale, solo spazio.
Aggiornamenti di Chromium DevTools
Questi aggiornamenti apportano modifiche a Chromium DevTools, nota come il riquadro Stili
gestisce grid-gap
e gap
ora 👍 👍
DevTools supporta sia grid-gap
sia gap
, perché gap
è essenzialmente un alias delle sintassi precedenti.
Nuovo potenziale per il layout
Con Flexbox gap
è più semplice offrire la comodità. Sblocco di layout potenti,
perfettamente distanziati e intrinseci. Nel video e nel seguente esempio di codice, Grid,
non è in grado di raggiungere il layout supportato da Flexbox. La griglia deve avere righe e colonne uguali,
anche se assegnate intrinsecamente.
Inoltre, nota quanto è dinamica la distanza tra i bambini quando sono fatti intrinsecamente così. Le query supporti non possono rilevare il wrapping di questo tipo per apportare modifiche intelligenti.
Flexbox gap
può e lo farà per te in tutte le internazionalizzazioni.
gap
a più colonne
Oltre al supporto della sintassi gap
da parte di Flexbox, i layout a più colonne supportano anche la sintassi gap
più breve.
article {
column-width: 40ch;
column-gap: 5ch;
gap: 5ch;
}
Molto bello.