Alignant les éléments en bas à l'aide de flexbox

Dans le scénario fourni, vous avez un conteneur div avec divers éléments enfants. Vous visez à obtenir une disposition où les éléments s'empilent verticalement, le bouton toujours positionné en bas, quelle que soit la hauteur du texte.

Flexbox fournit une solution à ce problème via des marges automatiques. Les marges automatique permettent la distribution de l'espace restant aux éléments avec des marges automatiques avant l'alignement. Une façon d'atteindre la disposition souhaitée est d'utiliser les CSS suivants:

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

Alternativement, vous pouvez utiliser une mise en page Flex comme ceci:

.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

Cette approche garantit que les éléments de texte se développent pour remplir la hauteur disponible, tandis que le bouton est poussé vers le bas du conteneur.