Propiedad align-self

La propiedad align-self establece la alineación a lo largo del eje transversal para un bloque flex individual y a lo largo del eje vertical para un elemento individual en un grid. En esencia, esta propiedad representa la propiedad align-items, pero para un bloque específico.

Sintaxis

selector {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Valores

Valor	Descripción
`flex-start`	El bloque está pegado al inicio del eje transversal.
`flex-end`	El bloque está pegado al final del eje transversal.
`center`	El bloque está centrado en el eje transversal.
`baseline`	El bloque se alinea según su línea base. La línea base es una línea imaginaria, que pasa por el borde inferior de los caracteres sin tener en cuenta los trazos descendentes, como por ejemplo en las letras `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	El bloque está estirado, ocupando todo el espacio disponible a lo largo del eje transversal, aunque aún se tienen en cuenta `min-width` y `max-width`, si están establecidos. Si se establecen el ancho y el alto para el elemento - `stretch` será ignorado.
`auto`	El bloque se alineará como se establece en la propiedad `align-items`.

Valor por defecto: auto.

Ejemplo . Valor stretch

En este ejemplo, a todos los bloques se les ha establecido el valor flex-start (propiedad align-items), y al tercer bloque - align-self con el valor 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;
}

Ejemplo . Valor flex-end

En este ejemplo, a todos los bloques se les ha establecido el valor flex-start para la propiedad align-items, y al tercer bloque - align-self con el valor 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;
}

Ejemplo . Alineación al inicio del eje vertical en un grid

Establezcamos la alineación para el primer elemento al inicio del eje 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;
}

Ejemplo . Alineación al centro del eje vertical en un grid

Establezcamos la alineación del primer elemento al centro del eje 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;
}

Ejemplo . Alineación al final del eje vertical en un grid

Establezcamos la alineación para nuestro primer elemento en el grid al final del eje 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;
}

Véase también

propiedad flex-direction,
que establece la dirección de los ejes de los bloques flex
propiedad justify-content,
que establece la alineación a lo largo del eje principal
propiedad align-items,
que establece la alineación a lo largo del eje transversal
propiedad flex-wrap,
que establece la multilínea de los bloques flex
propiedad flex-flow,
abreviatura para flex-direction y flex-wrap
propiedad order,
que establece el orden de los bloques flex
propiedad flex-basis,
que establece el tamaño de un bloque flex específico
propiedad flex-grow,
que establece la capacidad de expansión de los bloques flex
propiedad flex-shrink,
que establece la compresibilidad de los bloques flex
propiedad flex,
abreviatura para flex-grow, flex-shrink y flex-basis