结论与下一步行动

在本课程中，你已经掌握了创建 Flexbox 布局的方方面面。记住，精通的关键在于间隔重复。你应该让基础知识充分消化，然后时不时地回顾相关内容。

基础知识

我们使用 Flexbox 来设计移动端响应式网站和 Web 应用。因此，你需要了解基本的 CSS 显示类型，包括 block、inline、inline-block 和 flex。

为了实现响应式布局，你需要掌握如何设置断点，并明确你是采用移动优先还是桌面优先的设计方式。

如果你曾对这些概念感到困惑，请返回课程的 入门部分 进行复习。

Flexbox 容器

使用 display: flex; 时，首先要定义容器规则。一个 Flexbox 由容器和内部的 Flex 子项组成。容器规则决定了所有子项在容器内的对齐方式：

• flex-direction：定义布局方向为从左到右、从右到左、从上到下或从下到上。它确定了主轴和交叉轴的方向。
• justify-content：定义 Flex 子项在主轴上的对齐方式。
• align-items：定义 Flex 子项在交叉轴上的对齐方式。
• flex-wrap：允许 Flexbox 容器在主轴方向上以多行或多列的形式显示内容。
• align-content：用于在交叉轴方向上分配空白空间。

我们还学习了 flex-flow 缩写属性，可以将 flex-direction 和 flex-wrap 合并为一条规则。

Flex 子项

虽然容器的样式至关重要，但子项的样式常被视为锦上添花。我们学习了以下规则：

• align-self：为单个 Flex 子项设置例外，使其与容器级别的 align-items 设置不同。
• flex-grow：定义当视口尺寸变化时，某个 Flex 子项相对于其他子项的扩展速度。
• flex-shrink：定义当视口尺寸变化时，某个 Flex 子项相对于其他子项的收缩速度。
• flex-basis：设置 Flex 子项的基础宽度或高度，从而影响其扩展或收缩的基础。
• order：影响 Flex 子项的排列顺序。

我们还学习了 flex 缩写属性，它将 flex-grow、flex-shrink 和 flex-basis 合并为一条规则。

理论联系实际

掌握基本规则固然重要，但雇主和客户并不为知识本身付费，他们奖励的是解决问题的能力。因此，我们将理论应用于实践，完成了博客首页布局的构建。

下一步

Flexbox 是创建包含单行或单列 Flex 子项的容器最简便的工具。尽管可以将单个 Flex 子项也设为 Flex 容器，但 Flexbox 的局限性在需要创建多行多列布局时就会显现。因此，在熟练掌握 Flexbox 之后，下一步自然就是学习 网格系统（Grid）。

Flexbox 因其简洁性而非常出色，但当需要定义复杂的多行多列布局时，Grid 就显得尤为实用。