Proprit CSS align-self

Exemple interactif

align-self: stretch;

align-self: center;

align-self: start;

align-self: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">Un</div>
    <div>Deux</div>
    <div>Trois</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 200px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Syntaxe

/* Valeurs avec un mot-cl */
align-self: auto;
align-self: normal;

/* Alignement gomtrique */
/* align-self ne gre pas les valeurs left et right */
align-self: center;
align-self: start;
align-self: end;
align-self: self-start;
align-self: self-end;
align-self: flex-start;
align-self: flex-end;
align-self: anchor-center;

/* Alignement selon la ligne de base */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /* Les objets dimensionns avec 'auto' sont tirs pour remplir le conteneur */

/* Alignement avec gestion du dpassement */
align-self: safe center;
align-self: unsafe center;

/* Valeurs globales */
align-self: inherit;
align-self: initial;
align-self: revert;
align-self: revert-layer;
align-self: unset;

Valeurs

Cette proprit est dfinie comme un ou deux des mot-cls suivants :

auto

La valeur est calcule par rapport celle de align-items.

normal

L'effet de ce mot-cl dpend du mode de disposition utilis :

• Pour une disposition absolue, ce mot-cl est synonyme de start pour les botes remplaces positionnes de faon absolue, il est synonyme de stretch pour les autres botes positionnes de faon absolue.
• Pour une disposition absolue et des positions statiques, ce mot-cl est synonyme de stretch.
• Pour les lments flexibles, ce mot-cl est synonyme de stretch.
• Pour les lments de grille, ce mot-cl conduit un comportement similaire celui de stretch, sauf pour les botes avec un rapport d'aspect ou une taille intrinsque o il se comporte comme start.
• Cette proprit ne s'applique pas aux botes qui sont des blocs ou aux cellules d'un tableau.

self-start

Les lments sont aligns dans l'axe perpendiculaire l'axe principal pour que le bord correspondant soit align avec le bord du conteneur au dbut de l'axe.

self-end

Les lments sont aligns dans l'axe perpendiculaire l'axe principal pour que le bord correspondant soit align avec le bord du conteneur la fin de l'axe.

flex-start

Le bord de l'lment flexible, au dbut de l'axe perpendiculaire l'axe principal, est align avec le bord au dbut de l'axe perpendiculaire pour la ligne flexible.

flex-end

Le bord de l'lment flexible, la fin de l'axe perpendiculaire l'axe principal, est align avec le bord la fin de l'axe perpendiculaire pour la ligne flexible.

center

La bote dfinies par les marges est centre sur la ligne de l'axe perpendiculaire l'axe principal de la ligne. Si l'lment est plus grand que le conteneur dans ce sens, il dpasse galement de chaque ct.

baseline first baseline last baseline

Indique l'alignement par rapport la ligne de base. Si besoin, la valeur first baseline est remplace par start et last baseline est remplace par end.

stretch

Si la somme des dimensions des lments sur l'axe perpendiculaire l'axe principal est infrieure la dimension du conteneur et que l'lment est dimensionn automatiquement, celui-ci est agrandi (tout en respectant les ventuelles contraintes dictes par max-height/max-width ou autres) afin que l'ensemble des lments remplissent le conteneur sur cet axe.

anchor-center

Dans le cas des lments positionns par ancre, aligne l'lment au centre de l'lment ancre associ dans la direction de bloc. Voir Centrer sur l'ancre avec anchor-center.

safe

Si la taille d'un lment dpasse du conteneur avec l'alignement fourni par la valeur, l'lment est en ralit align comme si la valeur start avait t utilise.

unsafe

Quelle que soit les tailles relatives des objets par rapport au conteneur, la valeur indiquant l'alignement est respecte.

Dfinition formelle

Syntaxe formelle

align-self = 
  auto                                               |
  <overflow-position>? [ normal | <self-position> ]  |
  stretch                                            |
  <baseline-position>                                |
  anchor-center                                      

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end    

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

Exemples

HTML

<section>
  <div>lment #1</div>
  <div>lment #2</div>
  <div>lment #3</div>
</section>

CSS

section {
  display: flex;
  align-items: center;
  height: 120px;
  background: beige;
}

div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: flex-end;
  background: pink;
}

Rsultat

Spcifications

Compatibilit des navigateurs

Voir aussi

• Concepts de base des botes flexibles
• Aligner des lments dans un conteneur flexible
• Alignement des botes dans une grille
• Alignement des botes CSS
• La proprit align-items
• La proprit justify-self
• La proprit place-self