Chromium tombe sur un trou d'ouverture de la Flexbox

La propriété CSS gap est disponible ici pour les moteurs de mise en page CSS Flexbox et multicolonne de Chromium.

Adam Argyle
David Grogan
David Grogan
GitHub

Écart de CSS

gap est relatif au flux, ce qui signifie qu'il change de manière dynamique en fonction de la direction du flux de contenu. Par exemple, gap s'ajuste automatiquement en fonction des différentes valeurs writing-mode ou direction que vous définissez pour vos utilisateurs internationaux. Cela permet de réduire considérablement la charge des problèmes d'espacement pour le composant et l'auteur CSS. Réduction du scaling du code

Absence de preuve de la prise en charge de la localisation, car il gère les changements de direction et de mode d'écriture : Codepen | Tweet

Compatibilité du navigateur

Navigateurs pris en charge

  • 57
  • 16
  • 52
  • 10.1

Source

Utilisation

gap accepte n'importe quelle longueur ou pourcentage CSS comme valeur.

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


L'écart peut être transmis de 1 longueur, qui sera utilisée à la fois pour la ligne et la colonne.

Raccourci
.grid {
  display: grid;
  gap: 10px;
}
Définir des lignes et des colonnes en même temps
Développé
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


L'écart peut être transmis de deux longueurs qui seront utilisées pour les lignes et les colonnes.

Raccourci
.grid {
  display: grid;
  gap: 10px 5%;
}
Définir simultanément les lignes et les colonnes séparément
Développé
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

Avant que gap ne soit intégré à Flexbox, les stratégies impliquaient des marges négatives, des sélecteurs complexes, des sélecteurs de pseudo-classe de type :last ou :first, ou d'autres moyens de gérer l'espace d'un ensemble d'enfants mis en page et encapsulant de manière dynamique.

Tentatives précédentes

Voici les modèles que les gens ont utilisés pour obtenir un espacement semblable à un espace.

des sélecteurs de pseudo-classe
.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}
chouette lobotomisée
.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}
Source

Les éléments ci-dessus ne remplacent pas complètement gap et nécessitent souvent des ajustements de @media ou de :lang() pour tenir compte des scénarios d'encapsulation, des modes d'écriture ou de la direction. L'ajout d'une ou deux requêtes média ne semble pas si grave, mais cela peut s'additionner et entraîner une logique de mise en page compliquée.

L'auteur ci-dessus voulait vraiment qu'aucun des éléments enfants ne soit modifié.

The Antidote: la lacune

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

Dans les deux premiers exemples (sans le gap Flexbox), les enfants sont ciblés et séparés par un espacement à partir d'autres éléments. Dans l'exemple de l'écart d'antidote, le conteneur est propriétaire de l'espacement. Chaque enfant se décharge ainsi, tout en centralisant la gestion de l'espacement. Simplifier la cohérence. Réorganisez, modifiez les fenêtres d'affichage, supprimez des éléments, ajoutez de nouveaux éléments, etc. L'espacement reste cohérent. Pas de nouveaux sélecteurs, pas de nouvelles requêtes média, juste de l'espace.

Mises à jour des Outils pour les développeurs Chromium

Ces mises à jour viennent s'ajouter aux outils pour les développeurs Chromium. Notez que le volet Styles gère désormais grid-gap et gap. 👍

Un bureau avec deux personnes travaillant à une table.
Devtools affiche à la fois grid-gap et gap, avec gap utilisé en dessous de grid-gap pour permettre à la cascade d'utiliser la syntaxe la plus récente.

Les outils de développement sont compatibles avec grid-gap et gap, car gap est essentiellement un alias des syntaxes précédentes.

Nouvelle mise en page potentielle

Avec Flexbox gap, vous profitez de bien plus que de simples avantages. Des mises en page puissantes, parfaitement espacées et intrinsèques. Dans la vidéo et l'exemple de code suivant, la grille ne peut pas obtenir la mise en page possible par Flexbox. La grille doit avoir le même nombre de lignes et de colonnes, même si elles sont intrinsèquement affectées.

Tweet

Notez également à quel point l'espacement entre les enfants est dynamique lorsqu'ils s'encapsulent de manière intrinsèque de cette manière. Les requêtes média ne peuvent pas détecter ce type d'encapsulation pour effectuer des ajustements intelligents. La Flexbox gap peut et s'en chargera pour vous dans toutes les internationalisations.

Plusieurs colonnes gap

En plus de la syntaxe Flexbox qui prend en charge la syntaxe gap, les mises en page à plusieurs colonnes acceptent également la syntaxe gap plus courte.

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

Génial !