Why doesn't "align-self: flex-end;" work?

Question

Flexbox

Hello!
There is such code:
https://jsfiddle.net/ec5Ldazv/
Please explain why this part does not work for the first ".wrap":

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

But if you comment out this:

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

Then everything starts working normally. But I need all other elements to be on top.
Why does not it work? Logically everything should work.

Answer 1

Please explain why this part does not work for the first ".wrap"

Because parent is set align-content: flex-start;to , which overrides To work, set align-self
parent instead to Result: https://codepen.io/hisbvdis/pen/qBWZOmqalign-content: flex-start;align-items: flex-start;