Flexbox 简介

本章我们将把静态布局转换为响应式布局。在编写本章内容时，我们深入思考了初学者如何能从阅读中获得最大收益。

是否应该以浮动布局为例？如今，浮动已不再被视为最佳实践；需要注意的是，我们现在可以使用 Flexbox 和 Grid，而基于浮动的布局本质上都是“技巧性”的解决方案。然而，尽管如此，浮动布局至今仍在广泛使用。

我们意识到，上述矛盾的核心在于实用性：在当前学习阶段，对于跟随本课程的新手来说，最值得教授的内容是什么？

我们得出结论：最好逐步引入 Flexbox 的概念，提供足够的知识来实现一个可工作的响应式布局。

基于此，让我们开始学习 Flexbox，并掌握其基本用法。

什么是 Flexbox？

Flexbox 是一种现代的网页布局构建方式。它最大的优势在于，我们不再需要像过去使用浮动或其他技巧那样，依赖各种“取巧”的手段来构建布局。

接下来，我们来看一个更新后的非响应式布局示例，该示例已改用 Flexbox 实现。之后，我们会添加一些媒体查询来实现响应式效果。

让我们看看这个例子：

当然，我们可以让上面的样式更加简洁（DRY 原则），但目前这样已经足够。这就是我们采用 Flexbox 重构后的布局效果。

在将上述布局变为响应式之前，我们需要先理解代码中的实现逻辑。接下来的一课中，我们将逐步解析这个布局的实现过程。