Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг Управление проектами
10 Июл 2023
2 мин
586

Выравнивание элемента по нижнему краю с помощью Flexbox

При создании веб-страницы, часто возникает необходимость зафиксировать определенный элемент в нижней части родительского контейнера. Приведем пример,

При создании веб-страницы, часто возникает необходимость зафиксировать определенный элемент в нижней части родительского контейнера. Приведем пример, когда на странице есть блок, состоящий из заголовков, текста и кнопки. При этом, независимо от объема текста, кнопка должна всегда располагаться в нижней части блока.

HTML код может выглядеть следующим образом:

<div class="content">
  <h1>Заголовок 1</h1>
  <h2>Заголовок 2</h2>
  <p>Текст параграфа</p>
  <a href="/" class="button">Кнопка</a>
</div>

Для решения этой задачи можно использовать CSS Flexbox, который предоставляет гибкий способ расположения элементов внутри контейнера.

В первую очередь, родительскому элементу (в нашем случае это div с классом content) нужно присвоить свойство display: flex. Это преобразует блок в гибкий контейнер, и теперь его дочерние элементы будут вести себя как flex-элементы.

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

В данном случае, свойство flex-direction: column; указывает на вертикальное направление оси, то есть элементы будут располагаться сверху вниз. justify-content: space-between; гарантирует равномерное распределение пространства между элементами. Свойство height: 100%; обеспечивает максимальную высоту контейнера.

Таким образом, при любом объеме текста, кнопка всегда будет располагаться в нижней части контейнера. Также стоит отметить, что элементы остаются в потоке, то есть их позиция влияет на расположение остальных элементов на странице.

Добавить комментарий