ジェントル フレックス

コンテンツの配置のみを調整し、プロセス中にサイズを変更しない中央揃えの手法。

この手法の詳細と効率的なケースについては、この記事の全文をご覧ください。

記事全文 · YouTube の動画 · 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;
}