sorry_i_noob
@sorry_i_noob

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

Здравствуйте!
Есть такой код:
https://jsfiddle.net/ec5Ldazv/
Объясните, пожалуйста, почему не работает эта часть у первого ".wrap":
.item:nth-of-type(3) {
  align-self: flex-end;
}


Но если закомментировать вот это:
.wrap {
  align-content: flex-start;
}

То все начинает нормально работать. Но мне нужно, чтобы все остальные элементы были сверху.
Почему не работает? По логике должно все работать.
  • Вопрос задан
  • 2723 просмотра
Решения вопроса 1
Объясните, пожалуйста, почему не работает эта часть у первого ".wrap"

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

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

Результат:
https://codepen.io/hisbvdis/pen/qBWZOmq
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы