S'occuper de 'l'écart'

L'attribut CSS gap n'est pas nouveau, mais l'année dernière, il a obtenu une grande fonctionnalité: maintenant cela fonctionne non seulement pour CSS Grid, mais aussi pour Flexbox. Étant donné cela, et je pense que la propriété est plus complexe qu'il n'y paraît, je veux revoir et expliquer exactement comment cela fonctionne.

Examinons de plus près gap et leurs propriétés connexes et comprenons comment et où ils travaillent.

Toutes les propriétés de l'écart

Tout d'abord, passons en revue toutes les propriétés CSS liées à gap . Il y en a six au total:

• grid-row-gap
• grid-column-gap
• grid-gap
• row-gap
• column-gap
• gap

À partir de cette liste, nous pouvons ignorer les trois premières propriétés. grid-* a été ajouté au début de la rédaction de la spécification de la grille CSS et a ensuite été obsolète lorsque gap est devenu plus général. Les navigateurs prennent toujours en charge ces propriétés grid-* déconticulées (à ce jour) et les traitent uniquement comme des préfixes non grid- . Par conséquent, grid-gap est la même que gap , grid-column-gap est la même que column-gap , grid-row-gap est la même que row-gap .

En ce qui concerne les trois autres propriétés, étant donné gap est une abréviation qui vous permet de spécifier les deux autres propriétés, nous avons vraiment besoin de savoir ce que faire row-gap et column-gap .

Notre compréhension de ces propriétés dépend du type de disposition CSS que nous utilisons. Regardons d'abord ces options.

Où peut être utilisé?

Si vous êtes comme moi, vous avez utilisé gap dans les dispositions de grille, mais maintenant il peut également être utilisé dans Flexbox ainsi que dans les dispositions multi-colonnes. Passons en revue chaque situation.

Lacunes

Tous les navigateurs prennent en charge gap dans les dispositions de grille, et ils sont très faciles à comprendre dans ce contexte.

• row-gap présente l'espace entre les pistes de ligne
• column-gap introduit l'espace entre les orbites de colonne

Créons une grille avec trois colonnes et deux lignes:

 <code>.container { display: grid; grid-template-columns: 200px 100px 300px; grid-template-rows: 100px 100px; }</code>

Cela nous donnera la grille suivante:

Les lignes de la figure ci-dessus sont appelées lignes de grille , qui séparent les pistes (lignes et colonnes) de la grille. Ces lignes n'existent pas vraiment dans la grille - elles sont invisibles, n'ont pas d'épaisseur et sont généralement ce que Devtools affiche lorsque nous permons l'inspecteur de la grille (dans Safari, Firefox, Edge ou Chrome).

Cependant, si nous commençons à ajouter des lacunes à la grille, cela fonctionnera comme ces lignes commencent à obtenir l'épaisseur.

Ajoutons un écart de 20px:

 <code>.container { display: grid; grid-template-columns: 200px 100px 300px; grid-template-rows: 100px 100px; gap: 20px; }</code>

Maintenant, les lignes entre nos pistes ont une épaisseur de 20 pix, donc poussant le projet de grille plus loin.

Il convient de noter que les pistes ont toujours la même taille (définie par grid-template-* );

Dans une grille, row-gap est toujours appliquée entre les pistes de lignes. Donc, si nous remplaçons gap par row-gap dans l'exemple ci-dessus, nous obtiendrons:

Et column-gap est toujours appliquée entre les pistes de colonne, donc le remplacement gap par column-gap produira les résultats suivants:

La grille est simple car par défaut, les colonnes sont verticales et les lignes sont horizontales, comme dans un tableau. Par conséquent, il est facile de se rappeler où se trouvent les applications column-gap et row-gap .

Maintenant, les choses deviennent un peu plus compliquées lors de l'utilisation writing-mode . Le mode d'écriture par défaut sur le réseau est le mode horizontal de gauche à droite, mais il existe également un mode d'écriture vertical, lorsque cela se produit, les colonnes deviennent horizontales et les lignes deviennent verticales. Faites toujours attention au writing-mode car cela peut le rendre moins intuitif comme il l'est habituellement.

Il s'agit d'une bonne transition vers la section suivante, car les colonnes et les lignes obtiennent de nouvelles significations dans Flexbox.

Flexbox Gaps

Parlons des lacunes dans la disposition Flexbox, où les choses deviennent un peu plus compliquées. Nous utiliserons l'exemple suivant:

 <code>.container { display: flex; }</code>

Par défaut, cela nous donnera un conteneur de flexion en ligne, ce qui signifie que les éléments à l'intérieur du conteneur sont empilés sur la même ligne horizontale de gauche à droite.

Dans ce cas, column-gap est appliquée entre les projets et row-gap n'a aucun effet. En effet, il n'y a qu'une seule ligne (ou ligne). Mais maintenant, ajoutons quelques lacunes entre les projets:

 <code>.container { display: flex; column-gap: 10px; }</code>

Passons maintenant à flex-direction du conteneur dans une colonne, qui empile les éléments verticalement de haut en bas, en utilisant le code suivant:

 <code>.container { display: flex; flex-direction: column; column-gap: 10px; }</code>

Que se passe-t-il ensuite:

L'écart a disparu. Même si column-gap ajoute de l'espace entre les éléments lorsque le conteneur est dans la direction de la ligne, il ne fonctionne plus dans la direction de la colonne.

Nous devons utiliser row-gap pour la récupérer. Alternativement, nous pouvons utiliser une abréviation de gap avec une valeur qui appliquera le même écart dans les deux sens, ce qui fonctionne dans les deux cas.

 <code>.container { display: flex; flex-direction: column; gap: 10px; }</code>

Donc, dans l'ensemble, column-gap fonctionne toujours verticalement (en supposant le writing-mode par défaut), row-gap fonctionne toujours horizontalement. Cela ne dépend pas de l'orientation du conteneur flexible.

Mais regardez maintenant les exemples impliquant des pauses de ligne:

 <code>.container { display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 10px; justify-content: center; }</code>

Ici, si l'espace ne suffit pas pour tout tenir en une seule ligne, nous permettons au projet d'envelopper des lignes sur plusieurs lignes en utilisant flex-wrap: wrap .

Dans ce cas, column-gap est toujours appliquée verticalement entre les projets et row-gap est appliquée horizontalement entre deux lignes flexibles.

Il y a une différence intéressante entre cela et la grille. Les lacunes de colonne ne s'alignent pas nécessairement sur les lignes flexibles. En justify-content: center De cette façon, nous pouvons voir que chaque ligne Flex est une disposition distincte avec des lacunes appliquées indépendamment des autres lignes.

Plusieurs lacunes de colonnes

Les multicolonnes sont un type de mise en page qui facilite le fait que le contenu se déroule automatiquement entre plusieurs colonnes, comme vous vous en doutez dans les articles de journaux traditionnels. Nous définissons le nombre de colonnes et définissons la taille de chaque colonne.

Les lacunes d'une mise en page multi-colonnes ne fonctionnent pas à peu près de la même manière qu'une grille ou une flexion. Il existe trois différences notables:

• row-gap n'a aucun effet.
• column-gap a une valeur par défaut qui n'est pas 0,
• L'écart peut être stylé.

Décomposons-le un par un. Premièrement, row-gap n'a aucun effet. Dans une disposition multi-colonnes, aucune ligne ne doit être séparée. Cela signifie que seule column-gap est liée (et l'abréviation gap ).

Deuxièmement, contrairement à Grid et Flexbox, la valeur par défaut de column-gap dans la disposition multi-colonnes est 1EM (plutôt que 0). Par conséquent, même s'il n'y a aucun espace spécifié, les colonnes de contenu sont encore visuellement séparées. Bien sûr, il peut être remplacé par défaut, mais c'est un bon défaut.

Voici le code sur lequel l'exemple est basé:

 <code>.container { column-count: 3; padding: 1em; }</code>

Enfin, nous pouvons styliser l'espace entre les colonnes dans une disposition multi-colonnes. Nous utilisons column-rule , qui fonctionne similaire à border :

 <code>.container { column-count: 3; column-gap: 12px; column-rule: 4px solid red; padding: 12px; }</code>

Support de navigateur

gap a été bien soutenu dans tous les aspects. Il y a plus d'informations sur Caniuse, mais en bref:

• Flexbox: gap est pris en charge n'importe où, sauf Internet Explorer (sur le point d'être éliminé), Opera Mini et UC Browser pour Android. Caniuse a un taux de soutien global de 87,31%.
• Grid: De même, mais nous constatons une cote d'approbation mondiale de 93,79%.
• Plusieurs colonnes: de manière similaire, mais pas prise en charge dans Safari, avec un taux de soutien global de 75,59%.

Donc, dans l'ensemble, gap est bien prise en charge et dans la plupart des cas, aucune solution de contournement n'est nécessaire.

Définissez le style de l'écart entre Flex et Grid

Il sera très utile de styliser l'écart entre Flexbox et CSS Grid. Malheureusement, il n'est pris en charge nulle part aujourd'hui. Mais la bonne nouvelle est qu'elle peut être réalisée dans un avenir proche. Cela a été discuté dans le groupe de travail CSS et est développé dans Firefox. Une fois que nous avons des implémentations et des propositions de spécification efficaces dans Firefox, il peut stimuler les implémentations dans d'autres navigateurs.

Pendant ce temps, il existe des solutions.

Une façon consiste à donner la couleur d'arrière-plan au récipient de grille, puis à donner au projet une couleur différente, et enfin laisser un écart pour faire apparaître la couleur du récipient.

Bien que cela fonctionne, cela signifie que nous ne pouvons pas utiliser les lacunes pour introduire un espace entre les projets. L'écart ici agit comme la largeur des frontières. Donc, pour séparer visuellement les éléments plus clairement, nous devons utiliser un rembourrage ou des marges sur les éléments, ce qui n'est pas idéal… comme nous le verrons dans la section suivante.

Je ne peux pas simplement utiliser la marge ou le rembourrage?

Oui, dans la plupart des cas, nous pouvons également utiliser margin (et / ou padding ) pour ajouter un espace visuel entre les éléments de mise en page. Mais gap a plusieurs avantages.

Premièrement, l'écart est défini au niveau du conteneur . Cela signifie que nous les définissons une fois pour toute la disposition et qu'ils sont toujours appliqués de manière cohérente dans la disposition. Les marges d'utilisation doivent être déclarées sur chaque élément. Cela peut devenir compliqué lorsque le projet est de nature différente ou provient de différents composants réutilisables.

La chose la plus importante est que gap ne nécessite qu'une seule ligne de code pour effectuer l'opération correcte par défaut. Par exemple, si nous essayons d'introduire un espace entre les projets Flex au lieu de les entourer, les marges ont besoin de circonstances spéciales pour supprimer la marge supplémentaire avant le premier projet et la marge supplémentaire après le dernier projet. En utilisant des lacunes, nous n'avons pas besoin de le faire.

En utilisant margin: 0 20px sur chaque projet Flex, nous obtiendrons:

Cependant, en utilisant gap: 40px sur le conteneur, nous obtiendrons:

Également dans les dispositions de grille, la définition des lacunes au niveau du conteneur est beaucoup plus simple et meilleure que de devoir définir les marges sur chaque élément et considérer les marges appliquées aux bords de la grille.

Utilisez margin: 20px sur chaque projet de grille:

Utilisez plutôt gap: 40px sur un conteneur de grille:

Accumulation d'espace vide

Sur la base de tout ce qui dit jusqu'à présent, margin et gap n'ont pas à être mutuellement exclusifs. En fait, il existe de nombreuses façons de séparer davantage les projets de la disposition, et ils fonctionnent tous bien ensemble.

gap n'est qu'une partie de l'espace vide créé entre les boîtes dans le conteneur de mise en page. margin , padding et l'alignement peuvent tous augmenter gap .

Voyons un exemple où nous construisons une disposition flexible simple en utilisant une largeur donnée, un écart, une certaine distribution de contenu (en utilisant justify-content ) ​​et quelques marges et rembourrage:

 <code>.container { display: flex; gap: 40px; width: 900px; justify-content: space-around; } .item { padding: 20px; margin: 0 20px; }</code>

Supposons que ce code produit les résultats suivants:

Voyons maintenant exactement comment l'espace vide entre les projets est créé:

Comme nous pouvons le voir, il existe quatre types différents d'espace vide entre deux projets flexibles consécutifs:

• Entre deux projets consécutifs, l'écart définit l'espace minimum entre ces projets. Il peut y avoir plus d'espace, comme dans ce cas, mais il n'y aura jamais moins d'espace.
• Les marges poussent le projet plus loin, mais contrairement aux lacunes, il ajoute de l'espace des deux côtés de tous les projets.
• Le remplissage offre un peu d'espace à l'intérieur de chaque projet.
• Enfin, et seulement s'il reste suffisamment d'espace, la distribution de contenu prend effet et distribue uniformément les éléments dans la ligne Flex en fonction de space-around .

Écart de débogage

Finissons par un sujet qui est très proche de moi: le support de Devtools pour les lacunes de débogage. Il y aura toujours des erreurs, et il est très gratifiant de savoir que Devtools peut nous soutenir, mais nous devons savoir quels outils peuvent nous aider.

Pour gap , je peux penser à deux fonctionnalités spécifiques qui peuvent être très utiles.

Mon écart est-il valable?

À moins que nous n'écurchions gap ou ne fournissons une valeur non valide, cette propriété sera toujours appliquée à la page. Par exemple, c'est correct:

 <code>.some-class { display: block; gap: 3em; }</code>

Il ne fera rien, mais il est valide CSS et le navigateur ne pense pas que gap ne fonctionne pas avec les dispositions de blocs. Cependant, Firefox a une caractéristique appelée "CSS inactive" qui le fait: il se soucie de CSS efficaces appliqués à des choses qui ont du sens. Dans ce cas, Firefox Devtools affiche un avertissement dans l'inspecteur.

Où est mon écart?

Chrome et Microsoft Edge ont également une fonction d'espace de débogage très utile. Il a été ajouté grâce à une collaboration entre Microsoft et Google, dans le but de créer des outils de débogage de disposition dans Chromium, un projet open source qui prend en charge les navigateurs et autres navigateurs. Dans ces navigateurs, vous pouvez survoler diverses propriétés dans le panneau Styles et voir comment ils affectent la page.

C'est ça. J'espère que cet article aide à comprendre certains des détails du fonctionnement des moyens du milieu dans CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!