Propriété align-self

La propriété align-self définit l'alignement le long de l'axe transversal pour un bloc flex individuel et le long de l'axe vertical pour un élément individuel dans une grille. Essentiellement, cette propriété représente la propriété align-items, mais pour un bloc spécifique.

Syntaxe

sélecteur {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Valeurs

Valeur	Description
`flex-start`	Le bloc est aligné au début de l'axe transversal.
`flex-end`	Le bloc est aligné à la fin de l'axe transversal.
`center`	Le bloc est centré sur l'axe transversal.
`baseline`	Le bloc est aligné sur sa ligne de base. La ligne de base est une ligne imaginaire, passant le long du bord inférieur des caractères sans tenir compte des descendantes, comme par exemple pour les lettres `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Le bloc est étiré, occupant tout l'espace disponible le long de l'axe transversal, tout en prenant en compte `min-width` et `max-width`, s'ils sont définis. Si une largeur et une hauteur sont définies pour l'élément - `stretch` sera ignoré.
`auto`	Le bloc sera aligné comme spécifié dans la propriété `align-items`.

Valeur par défaut : auto.

Exemple . Valeur stretch

Dans cet exemple, la valeur flex-start est définie pour tous les blocs (propriété align-items), et pour le troisième bloc - align-self avec la valeur stretch :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div id="elem">3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: stretch;
}

Exemple . Valeur flex-end

Dans cet exemple, la valeur flex-start est définie pour tous les blocs pour la propriété align-items, et pour le troisième bloc - align-self avec la valeur flex-end :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div id="elem">3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: flex-end;
}

Exemple . Alignement au début de l'axe vertical dans une grille

Définissons l'alignement pour le premier élément au début de l'axe vertical :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	align-self: start;
}

Exemple . Alignement au centre de l'axe vertical dans une grille

Définissons l'alignement du premier élément au centre de l'axe vertical :

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	align-self: center;
}

Exemple . Alignement à la fin de l'axe vertical dans une grille

Définissons l'alignement pour notre premier élément dans la grille à la fin de l'axe vertical :

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	align-self: end;
}

Voir aussi

la propriété flex-direction,
qui définit la direction des axes des blocs flex
la propriété justify-content,
qui définit l'alignement le long de l'axe principal
la propriété align-items,
qui définit l'alignement le long de l'axe transversal
la propriété flex-wrap,
qui définit la multiligne des blocs flex
la propriété flex-flow,
raccourci pour flex-direction et flex-wrap
la propriété order,
qui définit l'ordre des blocs flex
la propriété flex-basis,
qui définit la taille d'un bloc flex spécifique
la propriété flex-grow,
qui définit l'expansion des blocs flex
la propriété flex-shrink,
qui définit la contraction des blocs flex
la propriété flex,
raccourci pour flex-grow, flex-shrink et flex-basis