Alinhamento de um elemento individual no modelo flex em CSS

As próximas propriedades que vamos estudar não são mais aplicadas ao elemento pai dos itens flex, mas sim aos próprios elementos. Vamos examinar a propriedade align-self, que alinha um bloco individual ao longo do eixo transversal.

Suponha que temos blocos flex, dispostos em uma linha. Vamos alinhá-los ao centro verticalmente, definindo align-items com o valor center, e dar ao segundo elemento uma classe adicional elem e para ele definir um alinhamento diferente, por exemplo, vamos fixá-lo na borda superior.

Para isso, no nosso elemento com a classe elem vamos definir a propriedade align-self com o 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;
}

Результат: