掌握CSS Flexbox：构建响应式布局与内容居中技巧

body {
  padding: 64px; /* 为页面内容提供四周边距 */
  background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%); /* 示例背景 */
  /* 其他背景属性确保覆盖整个视口 */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.wrapper {
  height: calc(100vh - 64px * 2); /* 视口高度减去上下padding */
  width: 100%; /* 宽度占满父容器 */
  /* border: 1px solid black; */ /* 可用于调试查看wrapper边界 */
}

.wrapper {
  /* ... (上述高度和宽度属性) ... */
  display: flex; /* 启用Flexbox */
  flex-direction: column; /* 子项垂直排列 */
  justify-content: space-between; /* 在子项之间平均分配空间 */
}

.content {
  align-self: center; /* 使该Flex项目在交叉轴（水平方向）上居中 */
  /* 可选：设置最大宽度以限制内容区域 */
  max-width: 960px; /* 示例，根据需要调整 */
  width: 100%;
}

<div class="wrapper">
  <header>页面头部</header>
  <div class="content">
    <!-- 核心内容将放置在此处 -->
    <h1>Hey, I'm test</h1>
    <h2>Student software developer.</h2>
    <!-- 更多内容 -->
  </div>
  <footer>页面底部</footer>
</div>

.content {
  /* ... (上述属性) ... */
  display: flex;
  flex-direction: column; /* 确保内容块垂直堆叠 */
}

.grid {
  display: flex;
  flex-direction: column; /* 网格内部的行垂直堆叠 */
  /* 可选：添加内边距 */
  padding: 20px;
}

.row1, .row2 {
  display: flex; /* 使行内的子元素并排显示 */
  flex-direction: row; /* 子项水平排列 */
  justify-content: space-between; /* 子项两端对齐，中间留空 */
  margin-bottom: 20px; /* 行间距 */
}

/* 针对并排的段落或内容块 */
.p1, .p2 {
  flex: 1; /* 让段落平均分配可用空间 */
  padding-right: 15px; /* 示例，为左侧段落提供右边距 */
}
.p2 {
  padding-right: 0; /* 右侧段落不需要右边距 */
  padding-left: 15px; /* 示例，为右侧段落提供左边距 */
}

<div class="content">
  <div class="grid">
    <div class="row1">
      <div class="intro">
        <h1>Hey, I'm Marc</h1>
        <h2>Digital designer & front-end developer.</h2>
      </div>
      <div class="email">
        <a href="mailto:email@example.com" class="bigbutton">Get in touch</a>
      </div>
    </div>
    <div class="row2">
      <div class="p1">
        <p>Currently a design systems engineer helping people design better at InVision.</p>
      </div>
      <div class="p2">
        <p>Previously worked with Wonderbly, Vanity Fair, Great Little Place, Glamour, and Discovery Network.</p>
      </div>
    </div>
  </div>
</div>

/* 示例：自定义按钮样式 */
.bigbutton {
  padding: 15px;
  border: 1px solid;
  background-image: linear-gradient(135deg, #e2718d 0%, #E9B626 50%, #e2718d 100%);
  background-size: 200% 100%;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  color: white;
  text-decoration: none;
  transition: 0.3s;
  cursor: pointer;
}

.bigbutton:hover {
  background-position: 70% 0%;
}

/* 字体设置 */
:root {
  font-family: 'Roboto Mono', monospace; /* 引入外部字体 */
}