@Alexander3928

Как в flex опустить вниз последний элемент?

Как последний элемент(№5) опустить вниз, если для flex бокса используется flex-diretion: column? Мне нужно чтобы последний элемент №5 был в самом низу.

https://codepen.io/Alexxxsander/pen/JjMWGMN
  • Вопрос задан
  • 108 просмотров
Решения вопроса 2
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
margin-top auto
Ответ написан
@alexalexes
.item-5
{
    margin-top: auto !important;
}
.border
{
    background-color: #0f3feb;
    margin: 0 10px;
    width: 100px;
    height: 60px;
}

Обратите внимание на селектор .border - он имеет одинаковый уровень специфичности с .item-5, поэтому перебивается параметр margin (требуется костыль в виде !important).
Если нужно обозначить более специфичные свойства отдельных элементов, то .item-5 селектор нужно писать после селектора .border либо добавлять вес специфичности, например div.item-5, чтобы избавиться от костыля !important.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@evgeniy2024
Привет, есть небольшое решение к которому пришел
Я обернул доп. классом все item кроме 5, а в css просто написал flex: 1 1 100% этому классу
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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