Chromium non ha più Flexbox

La proprietà CSS gap è disponibile per i motori di layout CSS Flexbox e multi-colonna di Chromium.

Adam Argyle

David Grogan

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.