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

Termine chiave: gap è la distanza tra i publisher secondari. Potresti aver sentito chiamare questo tipo di spaziatura "canali" o "vicoli". Si tratta di uno spazio solo dove i bordi della casella dei bambini si toccano.

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.

Esempio di supporto per la localizzazione, in quanto gestisce le modifiche alla direzione e alla modalità di scrittura: Codepen | Tweet

Compatibilità del browser

Supporto dei browser

• 57
• 16
• 52
• 10.1

Origine

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.

Stenografia

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

Imposta insieme sia righe che colonne contemporaneamente

Espanso

.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.

Stenografia

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

Impostare contemporaneamente righe e colonne separatamente

Espanso

.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.

Selettori di pseudo-classi

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

gufo lobotomizzato

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

Fonte

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;
}

Nota: la proprietà dello spazio passa dall'elemento secondario a quello principale

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 mostra sia grid-gap che gap, con gap mostrato sotto grid-gap per consentire alla struttura a cascata di utilizzare la sintassi più recente.

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.

Tweet

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.