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

Question

[Alexander3928]

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

https://codepen.io/Alexxxsander/pen/JjMWGMN

Answer 1

[Михаил]

margin-top auto

Comments

[Alexander3928]

мне нужно без margin. Я так пробовал, результат почти который нужен, но все же он мне не подходит. Он дополнительно растягивает height.

Answer 2

[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.

Comments

[Alexander3928]

мне нужно без margin. Я так пробовал, результат почти который нужен, но все же он мне не подходит. Он дополнительно растягивает height.

[alexalexes]

Ничего не растягивается - ни элемент item-5, ни контейнер flex.
Если вам нужно заполнить пространство высотой item-5, то используйте flex-grow: 1 для этого элемента.

[Alexander3928]

alexalexes, а что margin-top: auto !important;
то единственный способ? Или через flex не получится?

[alexalexes]

Нарисуйте в paint-e какой результат вы ожидаете.
Вот такой получается c .item-5{margin-top: auto !important;}

А такой с .item-5 {flex-grow: 1;}

[Alexander3928]

alexalexes, я же говорю, мне нужен такой же результат, как и с использованием margin-top: auto !important; Только без использования margin. Я кстати ошибся, margin не растягивал height, мне просто показалось так, прошу прощения.

[alexalexes]

Есть такой вариант:

.flex
{
....
position: relative;
}
.item-5
{
 position: absolute;
  bottom: 0;
}

Но от него смердит попыткой поддержки старых браузеров Internet Explorer, в которых не развит flex.
Еще недостатком является то, что элемент item-5 не будет чуять присутствие других элементов в контейнере flex, если вдруг кому-то захочется выйти из своих размеров.

[Alexander3928]

alexalexes, хорошо. Спасибо. Пойду еще погуглю

Answer 3

[evgeniy2024]

Привет, есть небольшое решение к которому пришел
Я обернул доп. классом все item кроме 5, а в css просто написал flex: 1 1 100% этому классу