Des lacunes? Haleter!

Au début, il y avait des Flexbox (les enfants d'un affichage: un conteneur flex). Si vous vouliez qu'ils soient visuellement séparés, vous avez dû utiliser la justification du contenu (c'est-à-dire Justify-Continte: Space-between), la ruse à marge, ou parfois, les deux. Ensuite, les grilles sont venues (un affichage: un récipient de grille), et les grilles pourraient ne pas marger les lacunes minimales non tripriées entre les cellules de la grille, grâce à la grille. Flexbox n'a pas eu de lacunes.

Maintenant, ils peuvent, grâce au soutien croissant de Gap, le successeur de la grille qui ne se limite pas aux grilles. Avec Gap, vous pouvez écarter vos grilles, vos flex-box et même vos multiples colonnes. C'est gaptastique!

Écart avec la grille

Commençons où Gap est la grille la plus robuste: CSS. Voici une configuration de la grille de base dans HTML et CSS:

 <segction>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
 section></segction>

 section {
  Affichage: grille;
  Grid-Template Rows: Repeat (2, Auto);
  grille-template-colonnes: répéter (4, auto);
  Écart: 1EM;
}
Section Div {
  Largeur: 2em;
}

Cela place les cellules de la grille au moins 1EM les unes des autres. La distance de séparation peut être supérieure à celle, selon d'autres conditions au-delà de la portée de ce post, mais au minimum, elles doivent être séparées par 1EM. (OK, faisons un exemple: les lacunes de Gap s'ajoutent à toutes les marges sur les cellules de la grille, donc si tous les éléments de la grille ont une marge: 2px;, alors la distance visuelle entre les cellules de la grille serait au moins 1EM plus 4px.) Par défaut, les changements de la taille de l'espace provoquent la redimension des éléments de la grille, de sorte qu'ils remplissent leurs cellules.

Tout cela fonctionne parce que GAP est en fait du sténographie pour les propriétés Row-Gap et Column-Gap. L'écart: 1EM est interprété comme un écart: 1em 1em, qui est un raccourci pour le row-gap: 1em; Colonne-Gap: 1EM;. Si vous voulez différentes distances de lignes et d'écart de colonne, alors quelque chose comme GAP: 0.5em 1em fera bien.

Écart avec Flexbox

Faire la même chose dans un contexte Flexbox vous donne des lacunes, mais pas de la même manière qu'ils se produisent dans les grilles. Supposons le même HTML que ci-dessus, mais ce CSS à la place:

 section {
  Affichage: flex;
  wrap flex: enveloppement;
  Écart: 1EM;
}

Les Flexbox sont séparés par au moins la valeur de l'écart ici, et (grâce à Flex-Wrap) enveloppez de nouvelles lignes flexibles lorsqu'ils manquent d'espace à l'intérieur de leur conteneur Flex. La modification de la distance de l'espace pourrait entraîner un changement dans l'emballage des éléments flexibles, mais contrairement à la grille, la modification des lacunes entre les éléments Flex ne modifiera pas les tailles des éléments flexibles. Les changements d'écart peuvent entraîner un emballage flexible à différents endroits, ce qui signifie que le nombre d'éléments flexibles par ligne changera, mais les largeurs resteront les mêmes (sauf si vous les avez mis à grandir ou à rétrécir via Flex, c'est-à-dire).

Écart avec plusieurs colonnes

Dans le cas du contenu multicolonne, il y a un peu de restriction sur l'espace: seules les lacunes de colonne sont utilisées. Vous pouvez déclarer des lacunes de lignes pour le multicolumn si vous le souhaitez, mais elles seront ignorées.

 section {
  Colonnes: 2;
  Écart: 1EM;
}

Soutien

La prise en charge de l'écart, du row-gap et de la colonne est étonnamment répandue. Mozilla les a depuis la version 61, Chromium depuis la version 66, et grâce au travail de Sergio Villar d'Igalia, ils arrivent bientôt sur Safari et Mobile Safari (ils sont déjà dans les builds de l'aperçu technologique). Donc, si votre contenu de la grille, du flexion ou du multicolonne a besoin d'un peu plus d'espace pour respirer, préparez-vous à tomber dans l'écart!

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!