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.
-
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
:
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 grillegrid-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.