Flexbox align-self and margin auto

What does this mean in align-self?

If a flexbox item's cross-axis margin is auto, then align-self is ignored.

This is in Mozilla, almost in the beginning: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

If you give me an example it would be great thanks, I can't appreciate it without an example, the explanation is very vague.

<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>


div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: flex-end;
  background: pink;
}