выравнивание элементов внизу с использованием Flexbox

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

Flexbox предоставляет решение этой проблемы с помощью автоматических краев. Автоматическая маржа позволяет распределять оставшееся пространство по элементам с автокварн до выравнивания. Один из способов достижения желаемой макета-использовать следующие CSS:

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

Альтернативно, вы можете использовать гибкую макет, например,:

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}

  
heading 1
  
heading 2
  
Some text more or less
  Click me

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