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é align-self

align-self est une propriété CSS. Elle gère l'alignement d'un des éléments internes dans un container flexible ou dans une grille. Elle permet de gérer l'alignement élément par élément, contrairement aux autres propriétés qui agissent sur tous les éléments.

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).

flex-direction :
align-self :
Flex-box
1
2
3
4
5
Grille
1
2
3
4
5
6
7
8
9

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.