Flexbox align-self and margin auto-CodePudding

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;
}

CodePudding user response：

You can align flex elements (childs) also with automatic margins:

Visit https://www.samanthaming.com/flexbox30/31-flexbox-with-auto-margins/

Visit https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

Visit https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/