Justify-items - Astuces CSS

Anonim

La justify-itemspropriété est une sous-propriété du module d'alignement de boîtes CSS qui contrôle essentiellement l'alignement des éléments de la grille dans leur portée.

.element ( justify-items: center; )

justify-itemsaligne les éléments de la grille le long de l'axe des lignes (en ligne). Plus précisément, cette propriété vous permet de définir l'alignement des éléments à l'intérieur d'un conteneur de grille (pas la grille elle-même) dans une position spécifique (par exemple start, centeret end) ou avec un comportement (par exemple autoou stretch).

Lorsqu'il justify-itemsest utilisé, il définit également la justify-selfvaleur par défaut pour tous les éléments de la grille, bien que cela puisse être remplacé au niveau de l'enfant en utilisant la justify-selfpropriété sur l'enfant lui-même.

.grid ( display: grid; justify-items: center; ) .grid-item ( justify-self: start; )

Syntaxe

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Valeur initiale: legacy
  • S'applique à: tous les éléments
  • Héritée: non
  • Valeur calculée: comme spécifié
  • Type d'animation: discret

Valeurs

/* Basic keyword values */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Positional alignment */ justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; /* Overflow alignment */ /* Used as an optional second value for positional alignment */ justify-items: safe; justify-items: unsafe; /* Legacy */ justify-items: legacy center; justify-items: legacy left; justify-items: legacy right; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;

Valeurs de mots clés de base

  • stretch: Valeur par défaut. Aligne les éléments pour remplir toute la largeur de la cellule de l'élément de grille
  • auto: identique à la valeur de justify-itemsin parent.
  • normal: Bien que nous le voyions le justify-itemsplus souvent utilisé dans une mise en page en grille, c'est techniquement pour tout alignement de boîte et normalsignifie différentes choses dans différents contextes de mise en page, y compris:
    • dispositions au niveau du bloc ( start)
    • dispositions de grille stretch
    • flexbox (ignoré)
    • cellules de tableau (ignorées)
    • dispositions absolument positionnées ( start)
    • boîtes absolument positionnées ( stretch)
    • remplacés les boîtes absolument positionnées ( start)
.container ( justify-items: stretch; )

Valeurs d'alignement de base

Cela aligne la ligne de base d'alignement du premier ou du dernier jeu de lignes de base de la boîte avec la ligne de base correspondante de son contexte d'alignement.

.container ( justify-items: baseline; )
  • L'alignement de secours pour first baselineest safe start.
  • L'alignement de secours pour last baselineest safe end.
  • baselinecorrespond à first baselinelorsqu'il est utilisé seul

Dans la démo ci-dessous (mieux vue dans Firefox), nous voyons comment les éléments s'alignent avec la ligne de base d'une grille basée sur l'axe principal.

Valeurs d'alignement de position

  • start: Aligne les éléments sur le bord de départ du conteneur d'alignement
  • end: Aligne les éléments avec le conteneur d'alignement des bords d'extrémité
  • center: Aligne les éléments au centre du conteneur d'alignement
  • left: Aligne les éléments à gauche du conteneur d'alignement
  • right: Aligne les éléments à droite du conteneur d'alignement
  • self-start: Aligne les éléments au début de chaque cellule d'élément de grille
  • self-end: Aligne les éléments à la fin de chaque cellule d'élément de grille
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Débordement des valeurs d'alignement

La propriété de débordement détermine comment elle affichera le contenu de la grille lorsque le contenu dépasse les limites de la grille. Ainsi, lorsque le contenu est plus grand que le conteneur d'alignement, cela entraînera un débordement qui pourrait entraîner une perte de données. Pour éviter cela, nous pouvons utiliser la safevaleur qui indique au navigateur de modifier l'alignement afin qu'il n'y ait pas de perte de données.

  • safe : Si un élément déborde du conteneur d'alignement, le startmode est utilisé.
  • unsafe : La valeur d'alignement est conservée telle quelle, indépendamment de la taille de l'élément ou du conteneur d'alignement.

Valeurs héritées

  • legacy : Lorsqu'il est utilisé avec un mot-clé directionnel (par exemple right, leftou center), ce mot-clé est passé aux descendants pour hériter. Mais si le descendant déclare, justify-self: auto;alors legacyest ignoré mais respecte toujours le mot-clé directionnel. La valeur est calculée sur la valeur héritée si aucun mot clé directionnel n'est fourni. Sinon, il calcule normal.

Démo

Plus d'information

  • Module d'alignement de boîtes CSS niveau 3 (version préliminaire)
  • Un guide complet de la grille
  • Un guide complet de Flexbox

Prise en charge du navigateur

Le support du navigateur justify-itemsexécute en quelque sorte la gamme car il est utilisé dans plusieurs contextes de mise en page, tels que la grille, la boîte flexible, les cellules de tableau. Mais en général, si la grille et la flexbox sont prises en charge, vous pouvez supposer que justify-itemsc'est également le cas.

Disposition de la grille

C'EST À DIRE Bord Firefox Chrome Safari Opéra
Non 16+ 45+ 57+ 10.1+ 44+
Chrome Android Android Firefox Navigateur Android Safari sur iOS Opera Mobile
81+ 45+ 81+ 10.1+ 59+
Source: caniuse

Disposition flexible

C'EST À DIRE Bord Firefox Chrome Safari Opéra
Non 12+ 20+ 52+ 9+ 12.1+
Chrome Android Android Firefox Navigateur Android Safari sur iOS Opera Mobile
87+ 83+ 81+ 9+ 12.1+
Source: caniuse

Propriétés connexes

Almanach le 27 oct.2019

align-items

Geoff Graham