Alineación de elementos individuales en el modelo flex en CSS

Las siguientes propiedades que estudiaremos ya no se establecen para el contenedor padre de los elementos flex, sino para los propios elementos. Analicemos la propiedad align-self, que alinea un bloque individual a lo largo del eje transversal.

Supongamos que tenemos bloques flex alineados en una fila. Los alinearemos verticalmente al centro, estableciendo align-items en el valor center, y al segundo elemento le daremos una clase adicional elem y para él estableceremos una alineación diferente, por ejemplo, lo pegaremos al borde superior.

Para ello, a nuestro elemento con la clase elem le establecemos la propiedad align-self en el valor flex-start:

html<div class="parent">
  <div class="child">1</div>
  <div class="child elem">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

css.parent {
  display: flex;
  align-items: center;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
.elem {
  align-self: flex-start;
}

Результат: