Chromium non ha più Flexbox

La proprietà CSS gap è presente per i motori di layout CSS Flexbox e multicolonna di Chromium.

Adam Argyle

David Grogan

CSS Gap

gap è relativo al flusso, il che significa che cambia dinamicamente in base alla direzione del flusso dei contenuti. Ad esempio, gap si adatterà automaticamente ai diversi valori writing-mode o direction impostati per gli utenti internazionali. In questo modo si riduce in modo significativo il carico delle sfide di spaziatura per il componente e l'autore del CSS. Maggiore scalabilità del codice.

Compatibilità del browser

Utilizzo

gap accetta come valore qualsiasi lunghezza o percentuale CSS.

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

A Gap può essere passata una lunghezza di 1, che verrà utilizzata sia per la riga che per la colonna.

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

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

A Gap possono essere passati due valori di lunghezza, che verranno utilizzati per la riga e la colonna.

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

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

Flexbox gap

Prima che gap fosse disponibile 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 con layout dinamico e a capo.

Tentativi precedenti

Di seguito sono riportati alcuni pattern utilizzati per ottenere spaziature simili a quelle con spazi.

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

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

Tuttavia, quanto sopra non sostituisce completamente gap e spesso è necessario modificare @media o :lang() per tenere conto di scenari di a capo, modalità di scrittura o direzione. Aggiungere una o due query sui media non sembra così male, ma possono sommarsi e portare a una logica di layout complicata.

L'autore sopra indicato intendeva realmente che nessuno degli elementi secondari fosse toccato.

Antidoto: il divario

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

Nei primi due esempi (senza Flexbox gap), gli elementi secondari sono scelti come target e viene assegnata loro una spaziatura dagli altri elementi. Nell'esempio di spaziatura antidoto, il contenitore possiede lo spazio. Ogni bambino può liberarsi del peso, centralizzando al contempo la proprietà degli spazi. Semplificare la coerenza. Riordinare, modificare le aree visibili, rimuovere elementi, aggiungere nuovi elementi e così via; la spaziatura rimane coerente. Nessun nuovo selettore, nessuna nuova query multimediale, solo spazio.

Aggiornamenti di Chromium DevTools

Con questi aggiornamenti vengono apportate modifiche a Chromium DevTools. Notare come il riquadro Stili ora gestisce grid-gap e gap 👍

DevTools supporta sia grid-gap che gap, perché gap è essenzialmente un alias delle sintassi precedenti.

Nuovo potenziale layout

Con Flexbox gap, offriamo molto di più della praticità. Accediamo a layout potenti, perfettamente distanziati e intrinseci. Nel video e nell'esempio di codice riportato di seguito, Grid non può ottenere il layout che è possibile ottenere con Flexbox. La griglia deve avere righe e colonne uguali, anche se sono assegnate in modo intrinseco.

Inoltre, nota quanto sia dinamica la spaziatura tra gli elementi secondari quando vengono a capo in modo intrinseco. Le query sui media non sono in grado di rilevare questo tipo di a capo per apportare aggiustamenti intelligenti. Flexbox gap può e lo farà per te in tutte le internazionalizzazioni.

Più colonne gap

Oltre a supportare la sintassi gap, Flexbox supporta anche la sintassi gap più breve per i layout a più colonne.

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

Molto bello.