Question

CSS3 的 Flexible Box（或者说 Flexbox）是一种布局模式，这种布局模式适用于不同的屏幕尺寸和不同的显示设备，它给页面元素提供了适配这些情况的能力。

简单来说，我们可以在一个 flex 容器中标记一些 flex 子元素，通过 CSS 来定义布局。Flexbox 有很多属性用来定义布局，这些属性结合起来能够实现更多的效果，举例如下。

- flex-direction：通过这个属性，我们能够指定 flex 容器的子元素是按行显示还是按列显示。我们也可以通过这个属性来定义元素按升序显示还是按降序显示。

- justify-content：通过这个属性，可以声明浏览器如何分配元素之外的可用空间。比如有 3 个节点，它们组合起来一共占据了容器 50%的空间，我们能够指定元素是集中在左边、右边还是中间，或者是均匀地从左往右分布，或者其他的一些方式。

- flex-wrap：通过这个属性，我们能够指定当 flex 子元素的总宽度超出了容器的空间时，是否换行显示。

上面提到的这些内容只是 Flexbox 能够提供的一小部分功能，你可以访问 MDN（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes ）得到更多的指导和帮助。我鼓励你通过练习去熟悉这些功能，就不再用大量生涩的概念和描述来折磨你了。现在，我们来看看 Flexbox 是如何解决一些常见问题的。