柔和彈性

一種只對齊內容，且不會在過程中改變大小的集中技術。

如要進一步瞭解這項技巧及其有效性，請參閱全文

完整文章 · 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;
}