Comment puis-je aligner un élément au bas d'un conteneur Flexbox ?

Alignement d'un élément vers le bas avec Flexbox

Dans un scénario où un conteneur div est rempli d'éléments enfants, y compris des titres, des paragraphes, et un bouton, il peut être souhaitable d'aligner le bouton sur le bas du conteneur quelle que soit la quantité de texte dans les paragraphes. Cet alignement peut être réalisé efficacement à l'aide de Flexbox.

Pour réaliser cet alignement inférieur à l'aide des marges automatiques, on peut appliquer le CSS suivant :

p { margin-bottom: auto; }

Cette directive pousse tous les éléments suivants vers le bas de le conteneur. Alternativement, le bouton lui-même peut être ciblé en utilisant :

a { margin-top: auto; }

Cela incite le bouton et les éléments suivants à être poussés vers le bas.

Dans le conteneur div, les propriétés Flexbox sont définies comme suit :

.content {
  display: flex;
  flex-direction: column;
}

Ces paramètres établissent une disposition en colonnes pour les éléments enfants dans le conteneur. Les titres n'ont pas de valeurs de marge pour éviter l'espacement entre les éléments consécutifs. La marge automatique sur le bouton garantit qu'il occupe systématiquement la position inférieure.

En mettant en œuvre ces ajustements de style, la mise en page souhaitée peut être obtenue, le bouton étant apposé au bas du conteneur, quel que soit le contenu du texte. dans les paragraphes.

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!