Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété justify-items

Description de justify-items.

La propriété justify-items gère la disposition horizontale des éléments par rapport à la largeur de leur colonne, dans une grille. Pour gérer la disposition des colonnes elles-même, reportez-vous à la propriété justify-content.

Le schéma ci-dessous montre une grille dont les colonnes sont alignées sur la gauche dans le container grille, et dont les éléments sont alignés de différentes façons dans leur colonne.
Remarque : le dessin est fait pour illustrer les différentes possibilités mais justify-items s'applique de façon identique à tous les éléments de la grille. Pour obtenir ce même résultat il faudrait utiliser la propriété justify-self.

Alignement dans la grille avec align-items

Valeurs pour justify-items.

  • justify-items: stretch;

    Valeur par défaut. Les éléments sont étirés pour remplir toute la largeur de leur colonne.

  • justify-items: center;

    Les éléments sont centrés dans leur colonne.

  • justify-items: start; justify-items: end;

    Les éléments sont positionnés au début (start) ou à la fin (code>end) de leur colonne. Début et fin sont déterminés d'après la direction du texte du container. Celle-ci pouvant être définie par la propriété direction appliquée au container ou par l'attribut dir.

  • justify-items: self-start; justify-items: self-end;

    Les éléments sont positionnés au début (start) ou à la fin (code>end) de leur colonne, en prenant en compte le sens d'écriture de l'élément lui-même (et non pas du container).

  • justify-items: left; justify-items: right;

    Les éléments sont positionnés sur la gauche (left) ou sur la droite (right) de leur colonne.

  • justify-items: initial;

    La valeur initiale est stretch.

  • justify-items: unset; justify-items: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Le simulateur vous permet de choisir la direction d'écriture pour le container grille. Cela modifiera le comportement des valeurs start et end.

D'autre part, les éléments sur la deuxième ligne ont une direction d'écriture de droite à gauche (rtl) comme cela se pratique dans les langues arabes. Cette particularité fera la différence pour les valeurs self-start et self-end.

Direction pour le container :
justify-items :
Grille
1
-2 -
-- 3 --
rtl 1
rtl 2
rtl 3

Voir aussi...

Grilles - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • grid : Propriété raccourcis définissant les principaux paramètres d'une grille.
  • grid-area : Positionne un élément dans une zone nommée de la grille.
  • grid-auto-columns : Mode de calcul des colonnes 'auto' dans une grille.
  • grid-auto-flow : Mode de calcul de l'emplacement des éléments dans la grille.
  • grid-auto-rows : Mode de calcul de la hauteur 'auto' des lignes dans une grille.
  • grid-column : Numéro de colonne(s) d'un élément dans une grille.
  • grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
  • grid-column-gap : Ajuste l'espacement des colonnes dans une grille.
  • grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
  • grid-gap : Ajuste l'espacement des lignes et des colonnes dans une grille.
  • grid-row : Numéro des lignes d'un élément dans une grille.
  • grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
  • grid-row-gap : Ajuste l'espacement des lignes dans une grille.
  • grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
  • grid-template : Largeur des colonnes et hauteur des lignes d'une grille.
  • grid-template-areas : Définition de zones nommées dans une grille
  • grid-template-columns : Définition du nombre et de la largeur des colonnes d'une grille.
  • grid-template-rows : Définition du nombre et de la hauteur des lignes d'une grille.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • justify-self : Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.

Grilles - Fonctions.

  • minmax() : Renvoie une valeur comprise dans une fourchette.
  • repeat() : Répète une valeur un certain nombre de fois.