CSS - Propriété align-self

Description de align-self.

Appliqué à un élément dans un flex-box, la propriété align-self gère la position de cet élément suivant l'axe secondaire. La plupart du temps il s'agira de l'axe vertical.
Rappel : le choix de l'axe principal et secondaire dans un flex-box est défini par le propriété flex-direction.

Appliqué à un élément dans une grille, align-self gère la position de cet élément dans sa cellule, suivant l'axe des lignes (vertical).

Pour gérer la disposition de tous les enfants de façon globale, reportez-vous aux propriétés align-items et align-content, à appliquer sur le container.

Pour une présentation détaillée des possibilités des flex-box ou des grilles, reportez-vous aux pages flex et grid.

Syntaxes pour align-self.

Dans les explications ci-dessous, nous avons considéré que l'axe principal du flex-box est l'axe horizontal. L'axe secondaire est donc l'axe vertical. Cette disposition est la plus courante.

• align-self: auto;

  L'élément est positionné comme tous les autres, conformément à la propriété align-items du container flex-box.

• align-self: stretch;

  L'élément est étiré pour remplir toute la hauteur de la ligne.

• align-self: center;

  L'élément est centré verticalement dans sa ligne.
  

• align-self: flex-start;
align-self: start;

  L'élément est positionné en haut de sa ligne.
  La première valeur est plutôt adaptée au container du type flex-box, tandis que la deuxième est plutôt réservée aux grilles mais les navigateurs ne font pas de différences.

• align-self: flex-end;
align-self: end;

  L'élément est positionné en bas de sa ligne.
  La première valeur est plutôt adaptée au container du type flex-box, tandis que la deuxième est plutôt réservée aux grilles mais les navigateurs ne font pas de différences.

• align-self: flex-end;
align-self: end;

  L'élément est positionné verticalement par rapport à la ligne de base du texte.

• align-self: inherit | initial | unset;

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

Simulateur.

Le simulateur ci-dessous ajuste la propriété align-self du bloc n° 2 (encadré en rouge), aussi bien dans le flex-box (premier exemple) que dans la grille (deuxième exemple).

Voir aussi...

Flex-box - 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.
• display : Type de l'élément et la façon de l'afficher.
• flex : Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
• flex-basis : Détermine la dimension par défaut d'un élément contenu dans un flex-box.
• flex-direction : Choisit l'axe principal et l'axe secondaire d'un flex box.
• flex-flow : Echaînement des éléments enfant dans un flex-box.
• flex-grow : Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
• flex-shrink : Autorise ou non la compression d'un élément contenu dans un flex-box.
• flex-wrap : Gestion des retours à la ligne dans un container flex.
• justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
• order : Ordre des éléments dans un flex-box.

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.
• 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.
• justify-self : Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.

Grilles - Fonctions.

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