Listado completo de tutoriales

72 - Flexbox - (align-self aplicada a los items)


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;
}

Retornar