Question

如果你是一个 Web 开发者，第一个问题应该是：

我们已经准备好使用 Flexbox 布局了吗？

现在，我很高兴地回答这个问题：

是的，我们已经准备好使用 Flexbox 了。

Flexbox 是什么意思呢？

flexible（形容词）：能够伸缩或很容易变化，以适应外界条件的变化。

box（名词）：通用的矩形容器。

弹性盒模型（The Flexible Box Module），又叫作 Flexbox，它的出现具有非常重要的意义。它挖掘了 CSS 盒模型基本原理，给我们提供了功能更加强大、更有用的模块布局方式。它在 CSS 中的定义和标记非常简单，通过媒体查询的方式就可以适配和响应变化。想象一下吧，在这样的世界中，我们不需要清除浮动，不需要使用额外的框架，也不需要使用大量冗余的代码来实现响应式栅格布局。Flexbox 做了所有这些看起来略显烦琐的工作，所以我们使用起来非常简单——定义 flex 容器，在容器里面再定义所需的 flex 项目，仅此而已，如下图。