Chromium non ha più Flexbox

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

Adam Argyle

David Grogan

CSS Gap

Termine chiave: gap è la spaziatura tra i bambini. Potresti aver sentito parlare di questo tipo di spaziatura con i nomi "gutter" o "alleys". È lo spazio in cui si toccano solo i bordi delle caselle dei bambini.

gap è relativo al flusso, il che significa che cambia dinamicamente in base alla direzione del flusso di contenuti. Ad esempio, gap si adatterà automaticamente ai diversi valori di writing-mode o direction che hai impostato per i tuoi utenti internazionali. Questo semplifica notevolmente il problema della spaziatura per l'autore del componente e del CSS. Riduzione ulteriore del codice.

Gap che dimostra il supporto della localizzazione, in quanto gestisce le modifiche alla direzione e alla modalità di scrittura: Codepen | Tweet

Compatibilità del browser

Browser Support

• 57
• 16
• 52
• 10.1

Source

Utilizzo

gap accetta qualsiasi lunghezza o percentuale CSS come valore.

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

Lo spazio può essere passato con una sola lunghezza, che verrà utilizzata sia per la riga che per la colonna.

Abbreviazione

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

Imposta contemporaneamente righe e colonne insieme

Espanso

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

Lo spazio può essere passato a due lunghezze, che verranno utilizzate per la riga e la colonna.

Abbreviazione

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

Imposta contemporaneamente righe e colonne separatamente

Espanso

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

Flexbox gap

Prima che gap fosse in Flexbox, le strategie prevedevano margini negativi, selettori complessi, :last o selettori di pseudoclassi di tipo :first o altri mezzi per gestire lo spazio di un insieme di elementi secondari disposti e disposti dinamicamente.

Tentativi precedenti

Di seguito sono riportati alcuni pattern utilizzati per ottenere una spaziatura simile a quella di un'interruzione.

Selettori di pseudo-classe

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

lobotomized owl

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

Fonte

Tuttavia, quanto sopra non sostituisce completamente gap e spesso richiede aggiustamenti di @media o :lang() per tenere conto degli scenari di wrapping, delle modalità di scrittura o della direzione. L'aggiunta di una o due media query non sembra un problema, ma possono accumularsi e portare a una logica di layout complessa.

L'autore di cui sopra intendeva in realtà che nessuno degli elementi secondari si toccasse.

The Antidote: gap

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

Nota: la proprietà della spaziatura viene trasferita dal figlio al genitore

Nei primi due esempi (senza Flexbox gap), i figli vengono presi di mira e viene assegnata la spaziatura rispetto ad altri elementi. Nell'esempio dello spazio tra gli antidoti, il contenitore possiede la spaziatura. Ogni bambino può alleviare il peso, centralizzando al contempo la proprietà della spaziatura. Semplificare la coerenza. Riordina, modifica i viewport, rimuovi elementi, aggiungi nuovi elementi e così via e la spaziatura rimane coerente. Nessun nuovo selettore, nessuna nuova media query, solo spazio.

Aggiornamenti di Chromium DevTools

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

DevTools mostra sia grid-gap che gap, con gap mostrato utilizzato sotto grid-gap per consentire alla cascata di utilizzare la sintassi più recente.

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

Nuovo potenziale di layout

Con Flexbox gap, non offriamo solo comodità. Sblocchiamo layout intrinseci potenti e perfettamente spaziati. Nel video e nel seguente esempio di codice, Grid non può ottenere il layout che Flexbox può. La griglia deve avere lo stesso numero di righe e colonne, anche se sono assegnate intrinsecamente.

Tweet

Inoltre, nota come la spaziatura tra gli elementi secondari sia dinamica quando vengono disposti in modo intrinseco in questo modo. Le media query non possono rilevare il wrapping in questo modo per apportare aggiustamenti intelligenti. Flexbox gap può farlo e lo farà per te in tutte le internazionalizzazioni.

Più colonne gap

Oltre al supporto di Flexbox per la sintassi gap, i layout a più colonne supportano anche la sintassi gap più breve.

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

Piuttosto figo.