Chromium tombe sur un trou d'ouverture de la Flexbox

La propriété CSS gap est disponible pour les moteurs de mise en page CSS Flexbox et Multi-Column de Chromium.

Adam Argyle

David Grogan

Espacement CSS

Terme clé  : gap correspond à l'espacement entre les enfants. Vous avez peut-être déjà entendu parler de ce type d'espacement sous le nom de "gouttières" ou "allées". Il s'agit de l'espace où les bords de la boîte enfant se touchent.

gap est relatif au flux, ce qui signifie qu'il change dynamiquement en fonction du sens du flux de contenu. Par exemple, gap s'ajustera automatiquement en fonction des différentes valeurs writing-mode ou direction que vous définissez pour vos utilisateurs internationaux. Cela facilite considérablement la gestion des problèmes d'espacement pour l'auteur du composant et du CSS. Mise à l'échelle du code encore plus réduite.

Lacune démontrant la prise en charge de la localisation, car elle gère les modifications de direction et de mode d'écriture : Codepen | Tweet

Compatibilité du navigateur

Browser Support

• 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 avec une longueur de 1, qui sera utilisée à la fois pour les lignes et les colonnes.

Abréviation

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

Définir simultanément les lignes et les colonnes

Développé

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

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

Abréviation

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

Définir les lignes et les colonnes séparément en même temps

Développé

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

Flexbox gap

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

Tentatives précédentes

Voici quelques modèles que les utilisateurs ont utilisés pour obtenir un espacement semblable à un écart.

Sélecteurs de pseudo-classe

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

hibou lobotomisé

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

Source

Toutefois, les éléments ci-dessus ne remplacent pas entièrement gap et nécessitent souvent des ajustements @media ou :lang() pour tenir compte des scénarios d'habillage, des modes d'écriture ou de la direction. Ajouter une ou deux requêtes média ne semble pas si mal, mais elles peuvent s'accumuler et entraîner une logique de mise en page compliquée.

L'auteur ci-dessus souhaitait en réalité que les éléments enfants ne se touchent pas.

L'Antidote : écart

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

Remarque  : La propriété de l'espacement passe de l'enfant au parent.

Dans les deux premiers exemples (sans Flexbox gap), les enfants sont ciblés et un espacement leur est attribué par rapport aux autres éléments. Dans l'exemple de l'espace d'antidote, le conteneur possède l'espacement. Chaque enfant peut se décharger de cette tâche, tout en centralisant la propriété de l'espacement. Simplifier la cohérence. Réorganisez, modifiez les fenêtres d'affichage, supprimez des éléments, ajoutez-en, 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 entraînent des modifications dans les outils de développement Chromium. Remarquez comment le volet Styles gère désormais grid-gap et gap 👍

Les outils de développement affichent grid-gap et gap, avec gap utilisé sous grid-gap pour permettre à la cascade d'utiliser la dernière syntaxe.

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

Nouveau potentiel de mise en page

Avec Flexbox gap, nous allons au-delà de la simple commodité. Nous débloquons des mises en page intrinsèques puissantes et parfaitement espacées. Dans la vidéo et l'exemple de code ci-dessous, Grid ne peut pas obtenir la mise en page que Flexbox peut obtenir. La grille doit comporter le même nombre de lignes et de colonnes, même si elles sont attribuées de manière intrinsèque.

Tweet

Notez également l'espacement dynamique entre les enfants lorsqu'ils s'enroulent de manière intrinsèque. Les requêtes média ne peuvent pas détecter ce type de retour à la ligne pour effectuer des ajustements intelligents. Flexbox gap peut le faire pour vous, et le fera, pour toutes les internationalisations.

gap multicolonne

En plus de la syntaxe gap, les mises en page multicolonnes acceptent également la syntaxe plus courte gap.

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

Plutôt cool, non ?