La propriété CSS gap
est disponible ici pour les moteurs de mise en page CSS Flexbox et multicolonne de Chromium.
É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
Compatibilité du navigateur
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.
.grid { display: grid; gap: 10px; }
.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.
.grid { display: grid; gap: 10px 5%; }
.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.
.layout > :not(:last-child) { margin-bottom: 10px; margin-right: 10px; }
.layout > * + * { margin-bottom: 10px; margin-right: 10px; }
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
. 👍
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.
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 !