CSS3弹性盒模型flexbox完整版教程

来自CSS Tricks上的一个教程，原文为：A
Complete Guide to Flexbox。文中详细的介绍了新版的弹性盒子的相关属性，并且给出了几个使用例子。是新手入门flexbox的一个优秀教程。当然里面的内容也大部分是根据w3c的文章来写的。里面的每个属性都给出了一张示例图，非常容易理解。本人根据其思路，结合中文翻译，写出了一篇flexbox的完整教程，希望对大家有用。

弹性布局（flexible
box）模块（目前是w3c候选的推荐）旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。

弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。

最重要的是弹性盒子布局与方向无关，相对于常规的布局（块是垂直和内联水平为基础），很显然，这些工作以及网页设计缺乏灵活性，无法支持大型和复杂的应用程序（特别当它涉及到改变方向，缩放、拉伸和收缩等）。

注意： Flexbox布局是最合适的一个应用程序的组件，以及小规模的布局，而网格布局是用于较大规模的布局。

基础知识

由于flexbox是一个整体模块，而不是单一的一个属性，它涉及到了很多东西，包括它的整个属性集。它们之中有一些是在父容器上设置，而有一些则是在子容器上设置。

如果经常布局基于块和内嵌流方向，柔性布局基于“柔性流动方向”。请看看这个数字从规范，解释背后的柔性布局的主要思路。
更多详情请查看链接：

CSS3弹性盒模型flexbox完整版教程