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 baseline
auto
justify-self
passe d'une valeur à l'autre sans transition.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
- 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 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édirection
sur le conteneur.→←→→→→justify-self:start
Remarque : les valeurs
flex-start
etflex-end
sont généralement acceptée sur un conteneur grille, mais sont traitées commestart
etend
. - 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ésmin-width
etmax-width
peuvent 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-mode
a la valeurvertical-lr
ouvertical-rl
.AaAaAaAqAaAajustify-self:baseline
- justify-self: safe ...; justify-self: unsafe ...;
Les modificateurs
safe
etunsafe
traitent 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
,left
etright
. Ils sont interdits avecauto
,normal
,stretch
etbaseline
, 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.
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) :
direction:rtl
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.
justify-self
appliquée à un élément dans un conteneur flex.
justify-self
appliquée à un élément dans un conteneur grille.
justify-self
(Flex-box)
justify-self
(Grid)
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.