Comment aligner un élément au bas de son conteneur à l'aide de Flexbox ?

Aligner l'élément vers le bas avec Flexbox

L'alignement d'un élément vers le bas de son conteneur peut être réalisé à l'aide de Flexbox. Dans ce scénario, où il y a un div avec divers éléments enfants et le désir de garder un élément .button fixé en bas, Flexbox propose une solution.

Flexbox distribue l'espace libre aux « marges automatiques » avant d'effectuer l'alignement à l'aide de justifier le contenu et s'aligner. Cela signifie que nous pouvons utiliser les marges automatiques pour pousser l'élément .button vers le bas sans le supprimer du flux.

Voici comment procéder :

Utiliser Margin-Bottom : Auto

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

Cette règle pousse les éléments suivants, y compris l'élément .button, vers le bas de la conteneur.

Utilisation de Margin-Top : Auto

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

Alternativement, cette règle pousse l'élément .button et tous les éléments suivants vers le bas.

Pour démontrer l'effet, considérez le HTML et le CSS suivants :

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}

h1, h2 {
  margin: 0;
}

a {
  margin-top: auto;
}

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

Cela créera un conteneur avec une hauteur fixe, où l'élément .button restera en bas quelle que soit la quantité de texte dans le paragraphe.

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!