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-self - Propriété CSS

justify-self

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

Description rapide
Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.
Statut
Standard
Valeurs prédéfinies
auto | normal | stretch | left | right | center | flex-start | flex-end | start | end | self-start | self-end | baseline | first baseline | last baseline
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété justify-self 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-self.

La propriété justify-self gère la position horizontale d'un élément dans sa cellule de grille. Elle doit donc être appliquée sur un élément de la grille, et non pas sur le conteneur.

Pour gérer la disposition de tous les éléments de façon globale, reportez-vous à la propriété justify-items, à appliquer sur le conteneur.

Pour une présentation détaillée des possibilités des grilles, reportez-vous à notre tutoriel sur les grilles.

Syntaxes pour justify-self.

justify-self
autoautonormalnormalstretchstretchsafesafeunsafeunsafefirstfirstlastlaststartstartendendcentercenterself-startself-startself-endself-endleftleftrightrightbaselinebaseline
     
  • justify-self: auto;

    L'élément est positionné conformément à la propriété justify-items du conteneur grille.

    Sur tous nos exemples, la direction d'écriture de l'élément est matérialisée par une flèche, vers la droite pour l'écriture des langues latines, de gauche à droite (direction:ltr), ou vers la gauche pour l'écriture des langues arables (direction:rtl).
    La propriété justify-self est appliquée aux deux éléments verts.
    D'autre part, la propriété justify-items du conteneur est positionnée sur center.

    justify-self:auto
  •  
  • justify-self: normal;

    L'élément est positionné conformément à l'alignement par défaut dans une grille, à savoir la valeur stretch.

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

    L'élément est positionné au début (start) ou à la fin (end) de sa colonne. Le début et la fin sont déterminées par rapport à la direction d'écriture du conteneur (la grille), ce qui este un peu contre-intuitif dans la mesure où la propriété est appliquée à l'élément lui-même. Pour les langues européennes, le début est à gauche. Il est à droite pour les langues arabes. La direction d'écriture est définie par la propriété direction sur le conteneur.

    justify-self:start

    Remarque : les valeurs flex-start et flex-end sont généralement acceptée sur un conteneur grille, mais sont traitées comme start et end.

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

    L'élément est positionné au début (start) ou à la fin (end) de sa colonne, en fonction de la direction d'écriture de l'élément lui-même.

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

    L'élément est positionné à gauche (left) ou à droite (right) de sa colonne. Le sens d'écriture n'est donc pas pris en compte.

    justify-self:left
  •  
  • justify-self: center;

    L'élément est centré horizontalement dans sa colonne. Sur notre exemple, cela ne change rien pour les éléments verts puisque tous les éléments sont déjà centrés par la propriété justify-items appliquée au conteneur.

    justify-self:center
  •  
  • justify-self: stretch;

    L'élément est étiré pour remplir toute la largeur de sa colonne. Attention, il faut que la largeur de l'élément ait été fixée à auto et que ni sa marge droite, ni sa marge gauche ne soit fixée à auto.
    Les propriétés min-width et max-width peuvent aussi fixer des contraintes qui limiteront l'effet de la valeur stretch.

    justify-self:stretch
  •  
  • justify-self: baseline; justify-self: first baseline; justify-self: last baseline;

    L'élément est aligné par rapport à la ligne de base du texte. Ces valeurs prennent du sens lorsque le texte est écrit verticalement, c'est à dire lorsque la propriété writing-mode a la valeur vertical-lr ou vertical-rl.

    Aa
    Aa
    Aa
    Aq
    Aa
    Aa
    justify-self:baseline
  •  
  • justify-self: safe ...; justify-self: unsafe ...;

    Les modificateurs safe et unsafe traitent le problème du contenu qui déborde de la place impartie. Ils peuvent être utilisés avec les valeurs start, end, center, self-start, self-end, left et right. Ils sont interdits avec auto, normal, stretch et baseline, mais ne présentent de toute façon aucune utilité avec ces valeurs.

  • justify-self: initial; justify-self: inherit; justify-self: revert; justify-self: revert-layer; justify-self: unset;

    La valeur initiale est : auto.

Animation de la propriété justify-self.

Pour que l'effet soit un peu plus spectaculaire, tous les éléments de cette petite grille ont été animés sur leur propriété justify-self, avec des durées différentes.

1
2
3
4
5
6

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

La grille de 4 cellules ci-dessous servira d'exemple pour le test des exemples de code. Ces derniers s'appliquent sur le troisième éléments, celui qui a un arrière-plan vert. Au chargement de la page la propriété justify-items est définie à center.

Modifier la valeur de justify-self en Javascript.

Deux exemples de code sont donnés ci-après. Le premier utilise la notation kebab-case (un tiret pour séparer les mots), et le deuxième la notation camel-case (une majuscule pour séparer les mots).


function setJustifySelf(el) {
el.style['justify-self']='start';
// ou
el.style.justifySelf='start';
}

Lire en Javascript la valeur de justify-self.

Pour que cet exemple de code fonctionne, la propriété justify-self doit avoir été affectée directement via l'attribut style, donc dans le code HTML, et non pas en utilisant un sélecteur CSS.


function getJustifySelf(el) {
alert(el.style['justify-self']);
// ou
alert(el.style.justifySelf);
}

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

La valeur calculée est déterminée par le navigateur après résolution de la cascade des héritages, et éventuellement des conflits entre plusieurs règle (voir les les règles de priorité). Si la propriété justify-self n'a été définie ni sur l'élément, ni sur aucun de ses parents, la valeur calculée sere auto.


function getCalcJustifySelf(el) {
alert(window.getComputedStyle(el).getPropertyValue('justify-self'));
}

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

Les notations kebab-case et camel-case sont reconnues par JQuery sans modification de syntaxe.


function setJustifySelf(el) {
$(el).css('justify-self','end');
// ou
$(el).css('justifySelf','end');
}

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


function getCalcJustifySelf(el) {
alert($(el).css('justify-self'));
// ou
alert($(el).css('justifySelf'));
}

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont consultables sur la page Javascript et CSS.

Simulateur.

Le simulateur ci-dessous ajuste la propriété justify-self des blocs n° 2 et 5 (ceux avec un fond bleu). Vous pouvez également choisir la direction d'écriture du conteneur.

L'élément numéro 5 est écrit de droite à gauche. Cela influencera sa position pour les valeurs self-start et self-end de justify-self.

Les valeurs faisant référence à la ligne de base du texte (baseline)ne peuvent pas remplir leur rôle sur du texte écrit horizontalement.


direction (pour le conteneur) :

justify-self :

1
2
3
4
5
direction:rtl
6

Prise en charge par les navigateurs (compatibilité).

La propriété justify-self est bien reconnue par tous les navigateurs actuels, que ce soit sur un flex-box ou sur une grille.

Colonne 1
Support de la propriété justify-self appliquée à un élément dans un conteneur flex.
Colonne 2
Support de la propriété justify-self appliquée à un élément dans un conteneur grille.
1
justify-self
(Flex-box)
2
justify-self
(Grid)
Estimation de la prise en charge en pourcentage du parc actuel.
93%
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-self.

Les spécifications CSS éditées par le W3C sont organisées en modules. justify-self 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.
Gère l'alignement horizontal des éléments dans un conteneur 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.