Flexbox，弹性盒子，是 CSS 提供的一种布局方式。把一个元素的 display 样式属性设置成 flex 以后，就可以使用 Flexbox 布局这个元素里的子元素了，我们可以设置子元素的对齐方式，排列顺序，如何分配剩余空间等等。

先在样式表里添加一段样式，选择器使用 * 号，它是通配符选择器，表示所有元素。把 box-sizing 设置成 border-box。

然后把 .box 元素的这块样式删除掉。再把页面上的这几个元素的父辈的 display 设置成 flex，它们的父辈是 #app 这个元素，把 display 设置成 flex 以后，这个元素就会成为一个 flex 容器，它里面的直接的子元素就是 flex 项目。

flex-direction

下面用 flex-direction 可以设置一下 flex 的方向，默认它的值是 row，表示从左往右水平排列 flex 项目。你会发现从左往右分别是 1 号元素，2 号元素，最后是 3 号元素。

这个 flex 方向还可以是 row-reverse，表示水平方向从右往左排列项目。现在从右往左，最右边是 1 号元素，然后是 2 号元素，最左边是 3 号元素。

我们还可以竖着排列 flex 项目，把 flex-direction 设置成 column，这样会从上往下竖着排列 flex 项目，最上面是 1 号元素，然后是 2号元素，最下面是 3 号元素。再试一下 column-reverse，表示反向竖排 flex 项目，这样最底部是 1 号元素，往上是 2 号元素，最上面是 3 号元素。

再把 flex-direction 设置成 row，从左往右水平排列项目。

order

在 flex 项目里用 order 可以设置项目的顺序，比如我想让 3 号元素排在第一这个位置上，添加一块样式，用 .box.three 这个选择器选择页面上的 3 号元素，然后用 order 设置一下它的排列，默认 flex 项目的 order 是 0。如果我们把 3 号元素的 order 设置成小于 0 的数字，它就会排在第一，比如设置成 -1，现在 3 号元素会排在第一，然后是 1 号元素，最后是 2 号元素。

flex-wrap

修改一下 HTML 文档，在这个 #app 元素的里面，再添加几个子元素，可以直接复制一下 1，2，3 号元素。我们再试一下用 flex-wrap 控制是否换行，默认它的值是 nowrap，也就是不换行。如果想换行显示 flex 项目，可以把它的值设置成 wrap。这样排不开的项目会换到下一行显示。

flex-flow

设置 flex-direction 还有 flex-wrap 有一种简写形式，可以使用 flex-flow 这个样式属性。注释掉 flex-direction 还有 flex-wrap。这里用一下 flex-flow，它的第一个值可以是 flex-direction 的值，比如 row，第二个值是 flex-wrap 的值，设置成 wrap。