Align-self

Расположение индивидуального flex-child вдоль вспомогательной оси. Задается flex-child.

.flex-parent {
  min-height: 200px;
}

.flex-child {
  /* height: auto; */ 
  height: 100px;
  min-width: 100px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.flex-child:nth-of-type(1) {
  align-self: auto;
}

.flex-child:nth-of-type(2) {
  align-self: center;
}

.flex-child:nth-of-type(3) {
  height: auto;
  align-self: stretch;
}

.flex-child:nth-of-type(4) {
  align-self: baseline;
}

.flex-child:nth-of-type(5) {
  align-self: flex-end;
}

.flex-child:nth-of-type(6) {
  align-self: flex-start;
}

.flex-child:nth-of-type(7) {
  align-self: initial;
}