Как прижать блок к низу css flex

Если вы используете flexbox в CSS, то чтобы прижать блок к низу, можно использовать свойство align-self: flex-end для дочернего элемента в родительском контейнере.

Вот пример:

<div class="container">
  <div class="content">
    <p>Контент</p>
  </div>
  <div class="footer">
    <p>Футер</p>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 400px;
}

.content {
  padding: 20px;
  background-color: #f2f2f2;
}

.footer {
  padding: 10px;
  background-color: #ccc;
  align-self: flex-end;
}

Рассмотрим CSS для примера подробнее:

• .container — родительский элемент, у которого задано свойство display: flex для использования flexbox. flex-direction: column устанавливает расположение дочерних элементов в колонку. justify-content: space-between распределяет доступное пространство между элементами;
• .content — это дочерний элемент, который располагается в верхней части контейнера. Заданы отступы и цвет фона для визуального отличия содержимого страницы;
• .footer — это другой дочерний элемент, который должен быть прижат к низу контейнера. С помощью свойства align-self: flex-end мы выравниваем его по оси Y в конце контейнера.

Обратите внимание, что для правильной работы выравнивания по оси Y в flexbox, необходимо задать высоту родительскому элементу (height).