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.Schéma de la syntaxe de justify-self.
justify-selfLes liens du schéma donnent accès à plus de détails sur les valeurs
Télécharger le schéma en SVG
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 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.
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.
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.AaAaAaAqAaAajustify-self:baseline - justify-self: safe ...; justify-self: unsafe ...;
Les modificateurs
safeetunsafetraitent le problème du contenu qui déborde de la place impartie. Ils peuvent ê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.
Valeurs communes à toutes les propriétés :
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.
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.
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
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
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
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 CSS Box Alignment Module.
Les définitions suivantes sont également décrites dans ce module.