http://www.css88.com/archives/7760
flexbox是flexible box 的简称，是CSS3引入的新的布局模式，它决定了元素如何在页面上进行排列，使他们能够在不同的设备和尺寸下可预测的展现出来。
之所以被称为灵活的盒子，是因为它和table布局以及浮动元素内嵌块相比，可以:
默认排列成一行。
column排列成一列。
justify-content控制item在direction上的对齐方式。
单行元素时可以通过align-items来控制交叉轴上的对齐方式。
可以用align-self来控制单个元素的对齐方式。
通过wrap来允许多行排列
通过align-content实现交叉轴上的对齐，这里和direction方向上的对齐是一模一样了。
可以用flex-grow来控制某个item的相对于其他item的拉伸比例，从而填充容器。先确定item的原始大小，计算余下空间的大小，然后这些空间被grow规则分配。
用flex-shrink来收缩item.
用flex-basis来重新定义item的尺寸大小
用last-child和first-child来选择class标签里面的dom.(最好的方法是定义class时定义两个名字)