如何仅用HTML和CSS实现可响应的网页头部标题段落容器布局？

核心用Flex弹性布局实现，不需要额外JS，天然支持响应式，适配逻辑非常好维护。

实现步骤 #

• 先搭基础DOM结构
  所有需要均匀分布的元素（包括Lorem Ipsum标题、段落，还有导航、按钮、配图这类其他元素）全部作为同一个父容器的直接子节点，不要额外套多余的嵌套层，参考结构：

<header class="page-header">
  <!-- 导航栏模块，和文本是同级元素 -->
  <div class="nav-bar">
    <div class="logo">站点Logo</div>
    <div class="nav-links">导航菜单</div>
  </div>
  <!-- 标题、段落直接放在父容器下，不要额外包层 -->
  <h2 class="header-title">Lorem Ipsum</h2>
  <p class="header-desc">对应说明段落文本</p>
  <button class="header-btn">操作按钮</button>
</header>

• 写核心CSS样式
  父容器开启纵向Flex布局，用内置的间距分配属性实现均匀分布，不用手动算margin凑间距：

/* 全局重置，清除浏览器默认边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page-header {
  /* 宽度占满视口，最小高度可以按设计稿调整，这里示例是占满首屏 */
  width: 100%;
  min-height: 100vh;
  /* 左右加响应式内边距，避免小屏幕下内容贴边 */
  padding: 0 5%;
  /* 核心布局属性 */
  display: flex;
  flex-direction: column;
  /* 所有直接子元素沿纵向等距分布，包括首尾元素和容器边缘的距离也和元素间距相等 */
  justify-content: space-evenly;
  align-items: center;
  /* 文本居中可以按需开启，匹配设计稿即可 */
  text-align: center;
}

• 补移动端响应式适配
  只需要在小屏幕断点下调整内边距、字号即可，布局逻辑不用改：

@media (max-width: 768px) {
  .page-header {
    padding: 0 3%;
  }
  .header-title {
    font-size: 1.8rem;
  }
  .header-desc {
    max-width: 90%;
    font-size: 1rem;
    line-height: 1.6;
  }
}

调整提示 #

如果设计稿要求首尾元素贴紧容器上下边缘、仅元素之间等距，把justify-content的值换成space-between即可；如果要求首尾和容器的间距是元素之间间距的一半，换成space-around，不需要改其他代码。
不要给直接子元素写固定的上下margin来凑间距，不然不同屏幕尺寸下很容易出现错位、溢出的问题，间距分配全交给Flex父容器处理就行。

内容的提问来源于stack exchange，提问作者user16761315