CSS Flexbox：弹性布局入门

这门课面向已经会写基础 HTML 和 CSS 的开发者：你能设置 color、padding、width，也能给一个简单页面做样式，但 Flexbox 对你来说仍然像碰运气。你设了 justify-content，元素却往错误的方向移动；你去用 align-items，结果什么也没发生。解决办法不是背更多属性，而是一个心智模型：flex 容器有两条轴，每个对齐属性都只回答“哪条轴、哪个方向”。一旦你看得见这两条轴，选属性就不再是抛硬币。

课程结束后，你将能够（课程目标）：

• 说出 display: flex 做了什么，以及哪些元素会变成 flex item。
• 对任意 flex 容器指出主轴和交叉轴，并预测哪个属性控制哪条轴。
• 不靠反复试错，把任何元素水平和垂直居中。
• 用 flex-direction 翻转主轴，并解释为什么此后 justify-content 会往另一个方向移动元素。
• 用 flex-grow / flex-shrink / flex-basis 分配剩余空间，并读懂 flex 简写。
• 用 flex-wrap 和 gap 搭出一个真实的、可换行的导航栏和卡片行。

先修条件： 你会写基础 HTML（元素、嵌套、class），会设置简单的 CSS 属性。不要求 CSS Grid、不要求任何 Flexbox 词汇，也不要求构建工具或终端技巧。

练习环境： 你使用自己的编辑器和浏览器，本课程的练习没有嵌入式沙盒。课节内的引导环节带有浏览器内实时沙盒，但每道练习都指向一个你自己打开的真实 .html 文件。

课程目录

来源列表见 sources.md。