相信研究过CSS3的同学对Flexbox布局一定不会陌生（作为一个未来主流的布局方式，至少有所耳闻）。最近完成了两个项目：一个是移动端H5项目，一个是嵌入HTML页面的mac客户端项目。为了庆祝这两个项目不用再兼容万恶的IE，同时要体现出现代浏览器的优势，决定在项目中尝试使用Flexbox布局。项目第一个版本完成后回过头来看，还是有不少需要注意的地方。现将项目中的一些经验总结一下，希望能够对想尝试使用Flexbox的同学有所帮助，在恰当的地方使用恰当的布局方法。
初识Flexbox
Flexbox布局俗称伸缩布局，它可以简单快速的创建一个具有弹性功能的布局。一个Flexbox布局是由一个伸缩容器（flex containers）和在这个容器里的伸缩项目（flex items）组成。伸缩容器（flex containers）是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目（flex items）。当在一个小屏幕上显示的时候，Flexbox可以让元素在容器（伸缩容器）中进行自由扩展和收缩，从而容易调整整个布局。
Flexbox布局能够让我们很轻松的实现以下效果：
- 在不设置元素的具体宽度的情形下将元素排成横排，并在一排的空间不够的时候折行。
- 快速的将元素排成竖排。
- 将元素沿着父容器的左边、右边或中间或者两端(之前只能使用text-align:justify，还需要为低版本浏览器做很多兼容)排齐。
- 改变元素显示的顺序而不改变HTML代码。
- 将每个元素占有的空间设置为父元素宽度／高度的一个比例，却不用担心在父元素的尺寸设置为百分比值的时候或是窗口的尺寸变化的时候布局会坏掉。
- 实现元素的水平，垂直居中。
这些效果是不是很诱人，为了我们都能更好的理解接下来的内容，需要对Flexbox有一个初步的认识。没有了解过Flexbox知识的同学请先移步伸缩布局--打开布局天堂之门！
Flexbox布局实战
如果已经对Flex有了初步了解，那让我们来举例说明什么时候更适合使用该布局。
1. 看看哪些产品使用了Flexbox布局
【No.1】youku H5播放页的控制区域
将浏览器的UA改为ios或者android，然后访问youku的播放页。先来看下示意图：
播放区域分为四个部分：mod-one为播放按钮区域，mod-two为时间显示区域，mod-three为切换视频质量和其他操作区域，mod-four为全屏按钮区域。
该播放区域的排版需求如下：mod-one和mod-two定宽依次居左，mod-four定宽居右，mod-three自动填充剩余的宽度且该区域内的元素依次居右排列（除了切换视频质量按钮外还有其他操作按钮）。
下面来看看youku如何使用Flexbox进行html布局以及css实现：
x-controls为Flexbox伸缩容器，核心样式如下：
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;