第 3 周总结：Flex 布局 — 让盒子"自觉排队"

蜗牛往上爬 · 前端工业可视化学习笔记第 3 周总结
本周从零掌握了 CSS 最核心的布局方案——Flex 弹性布局。从"主轴/交叉轴"的概念，到容器属性、项目属性，再到三种经典页面骨架，6 天时间让布局从"手动摆放"变成"自动排队"。

一、本周学了什么

天数	主题	核心知识点	产出
Day 1-2	Flex 核心概念与容器属性	主轴/交叉轴、display:flex、justify-content(6值)、align-items(5值)、flex-wrap、gap	水平导航栏
Day 3-4	Flex 进阶与项目属性	flex-grow/shrink/basis、flex简写、align-self、order	顶部导航 + 内容区页面
Day 5-6	综合布局	三种经典骨架、Flex模式速查表、嵌套Flex	企业信息展示页

知识图谱

Flex 布局
├── 核心概念
│   ├── 容器（display: flex 的父元素）
│   ├── 项目（容器的直接子元素）
│   ├── 主轴（默认水平 →）
│   └── 交叉轴（默认垂直 ↓）
│
├── 容器属性（控制整体）
│   ├── flex-direction：主轴方向
│   ├── justify-content：主轴对齐（6 个值）
│   ├── align-items：交叉轴对齐（5 个值）
│   ├── flex-wrap：是否换行
│   └── gap：统一间距
│
├── 项目属性（控制个别）
│   ├── flex-grow：放大比例
│   ├── flex-shrink：缩小比例
│   ├── flex-basis：基础大小
│   ├── flex：简写（flex: 1 / flex: none / flex: 0 0 200px）
│   ├── align-self：单独控制交叉轴
│   └── order：排列顺序
│
└── 经典布局模式
    ├── 水平居中：justify-content: center
    ├── 垂直居中：align-items: center
    ├── 水平垂直居中：justify-content: center + align-items: center
    ├── 两端对齐：justify-content: space-between
    ├── 侧边栏固定：flex: 0 0 240px
    ├── 均分：flex: 1
    └── 自动换行：flex-wrap: wrap + gap

二、三个练习页面回顾

练习 1：水平导航栏

用时：Day 1-2，约 2 小时

核心代码：

.navbar {
  display: flex;
  justify-content: space-between;  /* Logo 左，菜单右 */
  align-items: center;              /* 垂直居中 */
}
.nav-menu {
  display: flex;
  gap: 24px;                        /* 菜单项间距 */
}

收获：理解了主轴和交叉轴，justify-content 控制水平排列，align-items 控制垂直对齐。

练习 2：顶部导航 + 内容区

用时：Day 3-4，约 2 小时

核心代码：

body { display: flex; flex-direction: column; min-height: 100vh; }
.navbar { flex-shrink: 0; }
.content { flex: 1; display: flex; }
.sidebar { flex: 0 0 220px; }
.main-content { flex: 1; }
.card-grid { display: flex; flex-wrap: wrap; gap: 16px; }

收获：掌握了 flex: 1（均分）、flex: 0 0 220px（固定）、flex-shrink: 0（不缩小）三个核心组合。

练习 3：企业信息展示页

用时：Day 5-6，约 2 小时

核心代码：10 个 Flex 容器协同工作，从整体到局部层层嵌套。

收获：一个真实页面就是多个 Flex 容器的嵌套组合。写了 10 个 Flex 容器，每个负责一层排列。

三、Flex 核心速记卡

一句话口诀

容器管集体，项目管个人。主轴水平排，交叉轴垂直对。

最常用的 6 个模式

1. 水平居中     → justify-content: center
2. 垂直居中     → align-items: center
3. 两端对齐     → justify-content: space-between
4. 均分宽度     → flex: 1
5. 固定宽度     → flex: 0 0 240px
6. 自动换行     → flex-wrap: wrap; gap: 16px

flex 简写速记

flex: 1              → 均分（最常用）
flex: none           → 不伸缩
flex: 0 0 240px      → 固定 240px
flex: 0 1 auto       → 默认值

justify-content 速记

flex-start    → 靠左
center        → 居中
flex-end      → 靠右
space-between → 两端贴边，中间均分
space-around  → 每个项目两侧间距相等
space-evenly  → 所有间距相等（含两端）

四、企业信息展示页：从普通页面到工业大屏

本周的"企业信息展示页"已经具备了大屏页面的骨架：

页面区域	大屏对应	改什么
顶部导航栏	大屏标题栏	背景深色、标题加光效
侧边栏	设备分类/告警面板	缩小宽度、半透明
统计卡片行	核心指标区	数字变大、绿色高亮
设备卡片列表	设备监控面板	深色背景、蓝色边框
页脚	底部状态栏	深色背景、隐藏或缩小

改造只需改 CSS 背景和颜色，HTML 结构一行不动。 这就是 HTML/CSS 分离的价值。

五、本周踩过的坑

坑	原因	解决
设了 Flex 属性但没效果	忘记写 `display: flex`	任何时候先写 `display: flex`
子元素没撑满	没给项目设 `flex: 1`	检查项目是否有 `flex: 1`
嵌套 Flex 方向不对	忘记设 `flex-direction`	每个容器独立设方向
容器高度塌陷	父元素没设 `min-height: 100vh`	垂直布局时设 `min-height`
设备卡片不换行	没设 `flex-wrap: wrap`	加 `flex-wrap: wrap`
间距用 margin 最后一个多余	没用 `gap`	改用 `gap`

六、自测清单

全部打勾再进入下一周。

[ ] 能解释 Flex 容器和项目的区别
[ ] 能说出主轴和交叉轴的概念及默认方向
[ ] 能写出 justify-content 的 6 个值并说出各自效果
[ ] 能写出 align-items 的 5 个值
[ ] 能使用 flex-wrap 和 gap
[ ] 能解释 flex: 1 和 flex: 0 0 200px 的含义
[ ] 能实现"侧边栏固定 + 主内容撑满"布局
[ ] 能实现卡片列表自动换行
[ ] 能实现水平导航栏（logo 左 + 菜单右）
[ ] 能说出 align-self 和 order 的作用
[ ] 3 个练习页面全部完成并在浏览器验证
[ ] 每日博客文章 1 篇（共 3 篇）+ 本篇周总结 = 4 篇完成

七、下周预告

第 4 周：Grid 布局与响应式

下周将进入 CSS 布局的另一个核心——Grid 网格布局。如果说 Flex 是一维的（“一行”），Grid 就是二维的（“行+列”）。

预计学习内容：

Grid 核心概念：网格轨道、网格线、网格区域
容器属性：grid-template-columns/rows、grid-area、gap
与 Flex 的选型：什么时候用 Grid、什么时候用 Flex
响应式基础：媒体查询、断点、移动优先
响应式实战：图片自适应、字体自适应

动手练：用 Grid 做"数据看板"网格布局 + 让它在手机上也好看。

📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 3 周 · 总结篇

【HTML+CSS】week3-summary