第二章支线二：浮空之域：布局法则深研

主线回顾

第二章：CSS秘典 · 色彩与布局的力量
支线一：影之殿堂 · 阴影与过渡魔法

🎬 剧情设定：

通过影之殿堂的光影考验后，林昊被“页面编织者”传送至神秘空岛——浮空之域。这片漂浮在虚空中的区域由无数平台拼接而成，但平台错乱失衡，只有理解“布局律法”的勇者，才能使碎片归位，重塑空间秩序。

🧭 第一阶段：弹性之径（Flexbox）

林昊踏上第一座浮空岛——弹性之径，守关者「风织灵」提出挑战：“用弹性法则整理混乱之阵。”

挑战结构：

<div class="flex-container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

原始 CSS：

.flex-container {
  display: flex;
}
.box {
  width: 100px;
  height: 100px;
  background: skyblue;
  margin: 5px;
}

灵魂之问✨：

1. 如何水平居中这3个盒子？
2. 如何让它们垂直居中？
3. 如何让中间的 B 占据两倍空间？

林昊施展布局咒语：

.flex-container {
  display: flex;
  justify-content: center;     /* 水平居中 */
  align-items: center;         /* 垂直居中 */
  height: 300px;
}

.box:nth-child(2) {
  flex-grow: 2;                /* B 占据双倍空间 */
}

风织灵赞叹道：“你已掌握伸缩布局的三大律法：方向、对齐与占比。”

🧙‍♂️ Flexbox要诀：

🧭 第二阶段：网格神域（Grid）

林昊来到第二块空岛——网格神域，此地漂浮着六块碎片，排列杂乱。女神「矩阵司祭」降临，她提出终极谜题：“构建六宫格，使界面复原。”

挑战结构：

<div class="grid-container">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
</div>

林昊注入网格之力：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.cell {
  background: #ffa;
  height: 80px;
  text-align: center;
  line-height: 80px;
  font-weight: bold;
}

🎯 网格魔法词解：

• display: grid：启用网格系统
• grid-template-columns：定义列宽
• repeat(n, x)：重复 n 次 x 单元
• 1fr：表示一个网格比例单位
• grid-gap：网格间距

司祭追问：“若要第1项横跨两列，第4项换行置底，如何书写？”

林昊再次释放：

.cell:nth-child(1) {
  grid-column: span 2;
}
.cell:nth-child(4) {
  grid-column: 1 / -1;
}

🧠 网格秘籍：

• grid-column: start / end：跨列
• grid-row: start / end：跨行
• grid-area：可命名区域 + 快速布局

🔮 第三阶段：布局融合塔（综合考验）

在空岛之巅，一座半崩塌的布局塔漂浮于虚空，林昊要将 Flex 与 Grid 融合，完成页面重构。

目标结构：卡片列表，外层横向滚动，内层卡片以网格排布内容。

<div class="scroll-list">
  <div class="card">
    <h3>标题</h3>
    <div class="content-grid">
      <div>图</div>
      <div>描述</div>
    </div>
  </div>
  <!-- 多个 card -->
</div>

.scroll-list {
  display: flex;
  overflow-x: scroll;
  gap: 20px;
  padding: 10px;
}

.card {
  min-width: 200px;
  background: white;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.content-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
}

✨ 实战提升点：

• 外层 flex 实现横向滚动
• 内层 grid 实现图文并排
• 组合布局模式提升模块化能力

📘 小结 · 布局秘典精华

🧪 魔法试炼任务

1. 用 Flex 实现一个“价格对比栏”三列等宽对齐
2. 用 Grid 实现一个响应式宫格图文模块（手机变一列，PC 三列）
3. 设计一个横向滚动的卡片组件，内含图文网格内容

林昊通过布局之道的终极试炼，获得了浮空核心「圣光坐标盘」，掌握了空间主宰之力，为下一阶段的网页建造打下坚实基础。