Gentle Flex

Technique de centrage qui aligne uniquement le contenu et ne modifie pas sa taille pendant le processus.

Consultez l'article complet pour plus de détails sur cette technique et ses cas d'efficacité.

Article complet · Vidéo sur YouTube · Source sur GitHub

HTML

<article class="gentle-flex">
  <h1>Gentle Flex</h1>
</article>

CSS

        .gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}