Justify-self - Propriété CSS
Résumé des caractéristiques de la propriété justify-self
auto | normal | stretch | left | right | center | flex-start | flex-end | start | end | self-start | self-end | baseline | first baseline | last baselineautojustify-self passe d'une valeur à l'autre sans transition.Single : valeur unique (l'ordre n'intervient pas).Schéma de la syntaxe de justify-self.
justify-self.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG
* indique une valeur par défaut, qui peut être omise.
Description de la propriété 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 une présentation détaillée des possibilités des grilles, reportez-vous à notre tutoriel sur les grilles.
Autres propriétés à connaître.
Ces propriétés concernent toutes le positionnement des éléments dans une grille.
Valeurs pour justify-self.
- justify-self: auto;
L'élément est positionné conformément à la propriété
justify-itemsdu 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-selfest appliquée aux deux éléments verts. Le deuxième étant écrit de la droite vers la gauche.
D'autre part, la propriétéjustify-itemsdu conteneur est positionnée surcenter.→←→→→→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édirectionsur le conteneur.→←→→→→justify-self:startRemarque : les valeurs
flex-startetflex-endsont généralement acceptée sur un conteneur grille, mais sont traitées commestartetend. - 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-itemsappliqué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 à
autoet que ni sa marge droite, ni sa marge gauche ne soit fixée àauto.
Les propriétésmin-widthetmax-widthpeuvent aussi fixer des contraintes qui limiteront l'effet de la valeurstretch.→←→→→→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-modea la valeurvertical-lrouvertical-rl.Aa
Aa
AaAa
Aa
AaAa
Aa
AaAa
Aa
AaAa
Aa
AaAa
Aa
Aajustify-self:baseline
justify-self:last baseline - justify-self: safe ...; justify-self: unsafe ...;
Les modificateurs
safeetunsafetraitent le problème du contenu qui déborde de la place impartie par la gauche. Ces contenus sont difficiles à accéder même avec une barre de défilement.safeetunsafepeuvent être utilisés avec les valeursstart,end,center,self-start,self-end,leftetright. Ils sont interdits avecauto,normal,stretchetbaseline, mais ne présentent de toute façon aucune utilité avec ces valeurs.Formaspassphobie→→→→→justify-self:endFormaspassphobie←→→→→justify-self:safe end - justify-self: initial; (
auto) justify-self: inherit; justify-self: revert; justify-self: revertLayer; justify-self: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Exemple d'animation de 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.
Accéder à la propriété justify-self par programme.
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).
let el = document.getElementById('id');
el.style['justify-self'] = 'start';
// ou
let el = document.getElementById('id');
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.
let el = document.getElementById('id');
let value = el.style['justify-self'];
// ou
let el = document.getElementById('id');
let value = 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 priorités).
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.
let el = document.getElementById('id');
let value = 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.
$('#id').css('justify-self', 'start');
// ou
$('#id').css('justifySelf', 'start');
Lire la valeur calculée de la propriété justify-self avec JQuery.
let value = $('#id').css('justify-self');
Autres exemples de code.
D'autres exemples de code Javascript et JQuery sont consultables sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent une valeur à la propriété justify-self et affichent ensuite soit la valeur telle qu'elle a été appliquée (premier
bouton), soit la valeur calculée (deuxième bouton). Dans le cas de justify-self il n'y aura pas de différences entre ces affichages.
Exemple interactif avec la propriété justify-self.
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) :
direction:rtlCompatibilité des navigateurs avec justify-self.
La propriété justify-self est bien reconnue par tous les navigateurs actuels.
justify-self dans le cas d'un élément de grille.Remarques :
(1) Utilisez la propriété non-standard -ms-grid-column-align.
justify-self(grille)
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
Safari
Safari sur IOS
UC Browser pour Androïd
Opéra mini
Histoire de la propriété justify-self.
-
Module CSS - Mise en page par grille - Niveau 1
Cette spécification définit comment réaliser des mises en page sous frome de grilles, composées de lignes et de colonnes, avec une structure du document qui reste très simple : un conteneur et autant d'éléments que de cellules. Beaucoup plus simple en tout cas que les tableaux.
Chacune des cellules peut être alignée horizontalement dans le largeur des colonnes, ou verticalement dans la hauteur des lignes. Elles peuvent aussi être réparties ou agrandies pour couvrir toute la place disponible. Le contenu de chacune des cellules peut être aligné horizontalement et verticalement.
Une nouvelle unité (fr) est disponible pour dimensionner les colonnes ou les lignes.Concernantjustify-self. Première définition de la propriétéalign-self.
07 Avril 2011Document de travail.
29 Septembre 2016Candidat à la recommandation.
-
Module CSS - Mise en page par grille - Niveau 2
Ce niveau 2 de la spécification sur les grilles introduit la notion de sous-grille. Il s'agit de grille imbriquées dans une autre, avec conservation des alignement de colonnes et/ou de lignes.
Concernantjustify-self. Pas de changement concernant la propriétéalign-self.06 Février 2018Document de travail.18 Août 2020Candidat à la recommandation. -
Module CSS - Alignement des blocs - Niveau 3
Concernantjustify-self. La description de la propriétéalign-selfest transférée dans ce module de la spécification.12 Juin 2012Document de travail.
Voir aussi, à propos des alignements.
Les spécifications CSS publiées par le W3C sont organisées en modules. justify-self fait partie du module CSS module CSS - Alignement des blocs.
Les définitions suivantes sont également décrites dans ce module.