Comment puis-je aligner des éléments au bas d'un conteneur à l'aide de Flexbox ?

Alignement des éléments vers le bas à l'aide de Flexbox

Dans le scénario fourni, vous disposez d'un conteneur div avec divers éléments enfants. Votre objectif est d'obtenir une mise en page où les éléments s'empilent verticalement, avec le bouton toujours positionné en bas, quelle que soit la hauteur du texte.

Flexbox apporte une solution à ce problème grâce aux marges automatiques. Les marges automatiques permettent la distribution de l'espace restant aux éléments avec des marges automatiques avant l'alignement. Une façon d'obtenir la mise en page souhaitée consiste à utiliser le CSS suivant :

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

Vous pouvez également utiliser une mise en page flexible comme celle-ci :

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

<div class="content">
  <h1 id="heading">heading 1</h1>
  <h2 id="heading">heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!