Flexbox align-self и margin auto

Что это означает в align-self?

Если поле поперечной оси элемента flexbox установлено автоматически, то align-self игнорируется.

Это в Мозилле, почти в начале: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

Если вы дадите мне пример, это было бы большое спасибо, я не могу оценить это без примера, объяснение очень расплывчато.

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

Каков источник цитаты?

— 14.09.2022 13:30

Привет, я обновил вопрос developer.mozilla.org/en-US/docs/Web/CSS/align-self

— 14.09.2022 13:32

Установите margin-top: auto вместо .example-container>div в примере на этой странице (с помощью инструментов разработчика браузера) и посмотрите, какие изменения произойдут при переключении между разными значениями align-self прямо сейчас.

— 14.09.2022 13:37

Спасибо, @CBroe, я заметил, что он его игнорирует, поэтому можем ли мы выравнивать гибкие элементы (дочерние элементы) также с автоматическими полями, и поэтому align-self игнорируется?

— 14.09.2022 14:03

css flexbox margin vertical-alignment

14.09.2022 13:27

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...