CSS 布局对一些人来说很难，而对另一些人则非常简单。如果你属于前者，可能会好奇那些出色的网站布局是如何实现的，甚至会钦佩某些开发者看似无所不能的“天赋”。

如果在本课程结束时，你也能成为那种超有才华的开发者，会怎样？你是否曾想过，真正让你与前沿设计之间存在差距的，其实是 Flexbox？

尽管许多人已经掌握了块级、行内、行内块级布局模式，以及浮动技术、绝对定位和相对定位等方法，但其实有一种通用解决方案几乎适用于所有场景：Flexbox。

在本课程中，我们将学习如何使用 Flexbox 创造惊艳的设计，并深入理解它为何在结构上优于其他布局方案。这意味着我们将用 Flexbox 实现以下功能：

• 替代 inline-block 实现三栏布局
• 无需设置自动外边距或绝对定位，即可实现元素的水平或垂直居中
• 构建导航栏
• 解决各种布局难题

你将学到什么？

本课程结构如下：

1. 在第一部分，我们将回顾一些对后续章节有用的 CSS 技巧与挑战。虽然本节不会讲解 Flexbox，但你会初步感受到 Flexbox 的强大之处。
2. 第二部分，我们将学习 Flexbox 容器及其属性。
3. 第三部分，我们将学习 Flexbox 元素的属性。
4. 没有真实项目案例的课程是不完整的。因此，在第四部分，我们将基于 Flexbox 构建一个移动端优先的网站。

第一部分目标 —— 开始学习 Flexbox

完成本章后，你不仅会复习巩固 CSS 知识，还能独立创建具备以下特性的网页布局：

• 多列布局
• 移动端优先的响应式设计
• 流体或固定宽度的容器

在简要回顾 CSS 声明基础之后，我们将深入理解盒模型的结构。盒模型的重要性不仅在于掌握外边距、边框、内边距和内容尺寸的渲染方式，更在于理解为何 border-box 的 box-sizing 模式在编写稳健 CSS 时至关重要。

我们将系统介绍 block、inline 和 inline-block 的 display 属性，并通过实践创建一个三栏布局。

本课程中的示例将说明，相比使用 inline-block，Flexbox 在多列布局中为何更具优势。

Flexbox 与媒体查询配合良好。因此，我们将复习使用媒体查询编写响应式断点的基础知识，并通过实际案例展示移动端优先响应式设计的核心原则。

到第一部分结束时，你将能够独立完成如下网页布局：

由于第一部分的目标是为引入和使用 Flexbox 做好 CSS 基础铺垫，如果你已完全理解上述示例，可以跳过大部分第一部分内容，直接阅读标题为「传统布局 - 使用 Flexbox 的解决方案」的课时。