Sanfter Flex

Ein Zentrierungsverfahren, bei dem nur Inhalte ausgerichtet und ihre Größe während des Vorgangs nicht geändert wird.

Im vollständigen Artikel finden Sie viele weitere Details zu dieser Methode und dazu, wann sie effizient ist.

Vollständiger Artikel · Video auf YouTube · Quelle auf 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;
}