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 :

justify-items - Propriété CSS

justify-items

Résumé des caractéristiques de la propriété justify-items

Description rapide
Gère l'alignement horizontal des éléments dans un conteneur grille.
Statut
Standard
Valeurs prédéfinies
normal | stretch | left | right | center | start | end | self-start | self-end | baseline | first baseline | last baseline | legacy
Pourcentages
Ne s'appliquent pas.
Valeur initiale
legacy
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété justify-items passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Alignement des blocs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: CRD (document proposé pour la recommandation)

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 un conteneur 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 conteneur grille, et dont les éléments sont alignés sur la droite de leur colonne.

Alignement dans la grille avec justify-items

justify-items s'applique de façon identique à tous les éléments de la grille. Pour obtenir un alignement spécifique à chaque élément, reportez-vous à la propriété justify-self.

justify-items agit sur l'alignement mais, dans certains cas, aussi sur la largeur des éléments de la grille. Par exemple, avec la valeur stretch les éléments sont agrandis pour emplir toute la largeur de la colonne. Pour toutes les autres valeurs, la largeur des éléments est fixée à fit-content.

Valeurs pour justify-items.

justify-items:
normalnormalstretchstretchsafesafeunsafeunsafefirstfirstlastlastlegacylegacystartstartendendcentercenterself-startself-startself-endself-endleftleftrightrightbaselinebaselineleftleftcentercenterrightright
     
  • justify-items: normal;

    Cette valeur est équivalente à start (voir plus loin).

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

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

    Pour les langues latines, la valeur start correspond donc à la gauche du conteneur, tandis que la valeur end correspond à la droite. Pour les langues arabes, qui s'écrivent de droite à gauche, ce sera le contraire.

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

    Les éléments sont positionnés au début (start) ou à la fin (end) de leur colonne, en prenant en compte le sens d'écriture des éléments eux-mêmes (et non pas du conteneur).
    Sur l'exemple ci-dessous, un seul élément a un sens d'écriture de droite à gauche (rtl) : son alignement est différent de celui des autres éléments.

    rtl
    justify-items:self-start
  •  
  • justify-items: left; justify-items: right;

    Les éléments sont positionnés sur la gauche (left) ou sur la droite (right) de leur colonne. Le sens d'écriture n'est pas pris en compte par ces deux valeurs.

    rtl
    justify-items:left
  •  
  • justify-items: center;

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

    rtl
    justify-items:center
  •  
  • justify-items: stretch;

    Les éléments sont étirés pour remplir toute la largeur de leur colonne.
    Attention ! Cela ne fonctionne que pour les éléments dont la largeur a été fixée à auto. Les éléments dont la largeur est fixée ne changent pas. Sur notre exemple, seuls les éléments de la première ligne ont une largeur auto et sont donc ajustés à la largeur de la colonne.

    rtl
    justify-items:stretch
  •  
  • justify-items: legacy; justify-items: legacy left; justify-items: legacy right; justify-items: legacy center;

    Le mot legacy transmet la valeur aux descendants. Il peut être utilisé avec les trois valeurs left, right ou center.

    Utilisé seule (sans left, right ni center) la valeur legacy est équivalente à normal.

  •  
  • justify-items: baseline; justify-items: first baseline; justify-items: last baseline;

    L'alignement des éléments se fait d'après la ligne de base du texte. Ces valeurs ne sont utilisables que si le texte des éléments est vertical. En effet, pour que l'alignement soit possible, la ligne de base doit être verticale.
    Si la valeur baseline est indiquée seule, first est par défaut : baseline est donc équivalent à first baseline.

    L'exemple ci-dessous montre une grille dont les éléments sont écrits verticalement (writing-mode:vertical-lr) et dont les tailles de caractères sont différentes. On constate que, dans une colonne donnée, ce sont bien les lignes de base des textes qui sont alignées.

    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    justify-items:baseline
  • justify-items: initial; justify-items: inherit; justify-items: revert; justify-items: revert-layer; justify-items: unset;

    La valeur initiale est : legacy.

Animation de la propriété justify-items.

L'animation de justify-items se fait bien sûr de façon brutale, sans progressivité, puisque les valeurs acceptées ne sont pas numériques.

1
2
3
4
5
6

Manipulation de la propriété justify-items par programme.

La petite grille ci-dessous (de 4 cellules) servira d'exemple pour tester les exemples de code. Au chargement de la page, la propriété justify-items est définie à la valeur center.

Modifier la valeur de justify-items en Javascript.

Les deux syntaxes habituelles de Javascript sont utilisables :

  • Avec le nom de la propriété écrit en kebab-case (un tiret pour séparer les mots).
  • Avec le nom écrit en camel-case (une majuscule pour séparer les mots).

function setJustifyItems(el) {
el.style['justify-items']='start';
// ou
el.style.justifyItems='start';
}

Lire en Javascript la valeur de justify-items.

L'exemple de code ci-dessous récupère la valeur de justify-items si cette dernière a été initialisée dans l'attribut style de l'élément. Les initialisations via un sélecteur CSS ne sont pas prises en compte par ce code.


function getJustifyItems(el) {
alert(el.style['justify-items']);
// ou
alert(el.style.justifyItems);
}

Lire la valeur calculée de justify-items en Javascript.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages et de la résolution des conflits éventuels (voir les règles de priorité). Si aucune valeur n'a été définie pour justify-items, ni sur l'élément, ni sur se parents, la valeur calculée sera la valeur initiale de la propriété (legacy dans le cas de justify-items).


function getCalcJustifyItems(el) {
alert(window.getComputedStyle(el).getPropertyValue('justify-items'));
}

Modifier la valeur de la propriété justify-items avec JQuery.


function setJustifyItems(el) {
$(el).css('justify-items','end');
// ou
$(el).css('justifyItems','end');
}

Lire la valeur calculée de la propriété justify-items avec JQuery.


function getCalcJustifyItems(el) {
alert($(el).css('justify-items'));
// ou
alert($(el).css('justifyItems'));
}

D'autres exemples ?...

Pour d'autres exemples de code Javascript et JQuery, consultez la page sur Javascript et CSS.

Simulateur.

Le simulateur vous permet de choisir la direction d'écriture pour le container grille.

Mais Chacun des éléments a sa propre direction d'écriture : les trois premiers sont écrits de gauche à droite comme c'est le cas dans les langues latines (ltr), et les trois derniers sont écrits de droite à gauche comme dans les langues arabes (rtl). Cette particularité fera une différence pour les valeurs self-start et self-end.

D'autres éléments ont également des particularités. L'élément numéro 3 a une contrainte sur sa largeur maximale. On voit que même la valeur stretch pour ne passe pas outre cette contrainte.

Les colonnes de la grille ont été matérialisées par des couleurs différentes. Il s'agit d'une image de fond.


direction (pour le container) :

justify-items :

1
2
3
4
direction:rtl
5
direction:rtl
6
direction:rtl

Prise en charge par les navigateurs (compatibilité).

Pas de problème de compatibilité à signaler sur la propriété justify-items, aussi bien lorsqu'elle est utilisée sur un flex-box, que sur une grille.

Colonne 1
Support de la propriété CSS justify-items appliquée à un conteneur flex.
Colonne 2
Support de la propriété CSS justify-items appliquée à un conteneur grille.
1
justify-items
(Flex-box)
2
justify-items
(Grid)
Estimation de la prise en charge en pourcentage du parc actuel.
95%
93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que justify-items.

Les spécifications CSS éditées par le W3C sont organisées en modules. justify-items fait partie du Module CSS - Alignement des blocs (CSS Box Alignment Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Disposition des lignes dans un flex-box ou une grille.
Disposition verticale des éléments dans un flex-box ou une grille.
Position verticale de l'un des éléments dans un flex-box ou une grille.
Définit l'espacement entre les colonnes.
Définit les espacements entre les lignes et entre les colonnes (grille, flex-box, colonnes).
Ajuste l'espacement des colonnes dans une grille.
Ajuste l'espacement des lignes et des colonnes dans une grille.
Ajuste l'espacement des lignes dans une grille.
Définit le positionnement suivant l'axe principal dans un flex-box ou une grille.
Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.
Disposition des éléments dans un flex-box ou une grille.
Défini le placement des éléments dans leur cellule (grille).
Définit l'alignement d'un élément aussi bien dans la direction inline que dans la direction block.
Définit l'espace entre les lignes d'une grille.