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 :

CSS - Propriété justify-self

Description de justify-self.

La propriété justify-self gère la position horizontale d'un élément dans sa cellule de grille.

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

Pour une présentation détaillée des possibilités des grilles, reportez-vous à la page grid.

Syntaxes pour justify-self.

  • justify-self: auto;

    Valeur par défaut. L'élément est positionné conformément à la propriété align-items de la grille.

  • justify-self: stretch;

    L'élément est étiré pour remplir toute la largeur de sa cellule.

  • justify-self: center;

    L'élément est centré dans sa cellule.

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

    L'élément est positionné au début (start) ou à la fin (end) de sa cellule. Le début et la fin sont déterminées par rapport à la direction d'écriture du container (la grille). 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 ou par l'attribut dir dans le code HTML.

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

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

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

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

  • justify-self: initial;

    La valeur initiale est auto.

  • justify-self: unset; justify-self: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Le simulateur ci-dessous ajuste la propriété justify-self du bloc n° 2 (encadré en rouge),

justify-self :
Grille
1
2
3
4
5
6
7
8
9

Voir aussi...

Grilles - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • grid : Propriété raccourcis définissant les principaux paramètres d'une grille.
  • grid-area : Positionne un élément dans une zone nommée de la grille.
  • grid-auto-columns : Mode de calcul des colonnes 'auto' dans une grille.
  • grid-auto-flow : Mode de calcul de l'emplacement des éléments dans la grille.
  • grid-auto-rows : Mode de calcul de la hauteur 'auto' des lignes dans une grille.
  • grid-column : Numéro de colonne(s) d'un élément dans une grille.
  • grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
  • grid-column-gap : Ajuste l'espacement des colonnes dans une grille.
  • grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
  • grid-gap : Ajuste l'espacement des lignes et des colonnes dans une grille.
  • grid-row : Numéro des lignes d'un élément dans une grille.
  • grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
  • grid-row-gap : Ajuste l'espacement des lignes dans une grille.
  • grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
  • grid-template : Largeur des colonnes et hauteur des lignes d'une grille.
  • grid-template-areas : Définition de zones nommées dans une grille
  • grid-template-columns : Définition du nombre et de la largeur des colonnes d'une grille.
  • grid-template-rows : Définition du nombre et de la hauteur des lignes d'une grille.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • justify-items : Gère l'alignement horizontal des éléments dans le container flex-box ou grille.

Grilles - Fonctions.

  • minmax() : Renvoie une valeur comprise dans une fourchette.
  • repeat() : Répète une valeur un certain nombre de fois.