Comment puis-je aligner les éléments vers le bas dans un conteneur Flexbox ?

Flexbox : éléments alignés en bas

Si vous avez un élément conteneur contenant des éléments enfants et que vous souhaitez aligner l'élément enfant le plus bas verticalement jusqu'au fond du conteneur, le modèle d'aménagement polyvalent Flexbox offre une solution efficace.

Dans l'exemple fourni :

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

Vous souhaitez la mise en page suivante :

-------------------
| heading 1          |
| heading 2          | 
| paragraph text     |
| can have many      |
| rows               |
|                   |
|                   |
|                   | 
| link-button        |
-------------------

Exploiter les marges automatiques

Les marges automatiques s'avèrent être un outil pratique dans ce scénario. Avant le processus d'alignement via justifier-content et align-self, tout espace libre restant est automatiquement distribué aux marges automatiques dans cette dimension.

Par conséquent, vous pouvez utiliser l'une ou les deux règles CSS suivantes :

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

Exemple de mise en œuvre

L'application des règles CSS suggérées, couplée à un conteneur Flexbox avec une orientation en colonnes, donne le résultat souhaité :

.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>

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!