当前位置：首页 > news >正文

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

news 2025/6/4 15:23:21

主线回顾

第二章：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;
}

灵魂之问✨：

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

林昊施展布局咒语：

.flex-container {display: flex;justify-content: center;     /* 水平居中 */align-items: center;         /* 垂直居中 */height: 300px;
}.box:nth-child(2) {flex-grow: 2;                /* B 占据双倍空间 */
}

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

🧙‍♂️ Flexbox要诀：

属性名	功能
display: flex	启用弹性布局
justify-content	主轴对齐（横向）
align-items	交叉轴对齐（纵向）
flex-direction	设置主轴方向
flex-grow / shrink / basis	控制子元素伸缩与占比

🧭 第二阶段：网格神域（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 实现图文并排
组合布局模式提升模块化能力

📘 小结 · 布局秘典精华

布局体系	特点
Flexbox	一维布局，灵活、常用于导航栏、按钮组
Grid	二维布局，精准、适用于复杂结构与卡片
组合使用	模块化页面的主流布局手法