La propiedad align-self de un item nos permite especificar la alineación dentro del contenedor flexible respecto al eje transversal.
Los valores que podemos asignarle a la propiedad "align-self" son:
La propiedad "align-self" almacena por defecto el valor "auto".
Pruebe de cambiar a los distintos valores posibles a la propiedad "align-self":
Problema: Definir un Flexbox con 6 items. Especificar un valor distinto para cada uno de los items en la propiedad "align-self".
pagina1.html
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="contenedor1">
<div id="item1">Caja 1</div>
<div id="item2">Caja 2</div>
<div id="item3">Caja 3</div>
<div id="item4">Caja 4</div>
<div id="item5">Caja 5</div>
<div id="item6">Caja 6</div>
</div>
</body>
</html>
estilos.css
#contenedor1{
display: flex;
background-color: #000;
height: 300px;
color:white;
font-size:2rem;
}
#item1 {
align-self: auto;
background-color: #0078A6;
}
#item2 {
align-self: flex-start;
background-color: #0084B6;
}
#item3 {
align-self: flex-end;
background-color: #008CC1;
}
#item4 {
align-self: center;
background-color: #0078A6;
}
#item5 {
align-self: stretch;
background-color: #0084B6;
}
#item6 {
align-self: baseline;
background-color: #008CC1;
}