用 Flex 换行做一个茶歇提醒页

今天做了一个叫“茶歇时刻”的单文件网页：米色背景、一个标题、三张提醒卡片。页面只展示文字，因此把 HTML 和 CSS 放在同一个文件中，没有加入 JavaScript。这里记录卡片布局的处理方式。

先确定内容顺序

页面先放 h1 标题和说明，再用一个容器装三张卡片。每张卡片包含 h2 和一句话：“放下屏幕”“喝一杯水”“看看窗外”。标题层级与阅读顺序一致，改文案时也容易找到位置。

用 Flex 让卡片自然换行

.cards {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 960px;
}
.card {
  width: 260px;
  padding: 32px 28px;
  border: 1px solid #e6dcc6;
  border-radius: 14px;
}

容器用 gap 管理卡片间距，flex-wrap 允许空间不足时换行。这样无需为三列、两列、一列分别写布局规则。卡片宽度固定，父容器限制最大宽度，页面两侧保留留白。

全局设置 box-sizing: border-box，让卡片的内边距和边框计入声明的宽度。需要更宽松的小屏适配时，可以把卡片宽度改成 width: min(260px, 100%)，避免卡片超过可用空间。

让样式服务于文字

背景使用浅米色，卡片使用接近白色的底色，再用细边框区分层次。正文使用系统字体，减少资源依赖。阴影只作为轻微提示，不承担内容分组的主要职责。三张卡片都是普通内容容器，没有添加按钮样式或点击行为。

这种页面适合做简单的展示练习：先写清楚内容，再控制宽度、间距和颜色。本次只完成静态页面及发布材料，未运行自动化、功能或交互测试。

源码：tea-break-20261018；作品：茶歇时刻。