Почему не работает «align-self: flex-end;»?

Question

[sorry_i_noob]

Здравствуйте!
Есть такой код:
https://jsfiddle.net/ec5Ldazv/
Объясните, пожалуйста, почему не работает эта часть у первого ".wrap":

.item:nth-of-type(3) {
  align-self: flex-end;
}

Но если закомментировать вот это:

.wrap {
  align-content: flex-start;
}

То все начинает нормально работать. Но мне нужно, чтобы все остальные элементы были сверху.
Почему не работает? По логике должно все работать.

Answer 1

[Рома Зварич]

Объясните, пожалуйста, почему не работает эта часть у первого ".wrap"

Потому что для родителя задано align-content: flex-start;, которое перекрывает align-self

Чтобы работало, родителю вместо align-content: flex-start; задайте align-items: flex-start;

Результат:
https://codepen.io/hisbvdis/pen/qBWZOmq