CSS3 Flex学习
CSS3的Flex属性是一个非常有用的布局方式.
一. 它的作用
如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；
可以快速让他们布局在一列；
可以方便让他们对齐容器的左、右、中间等；
无需修改结构就可以改变他们的显示顺序；
如果元素容器设置百分比和视窗大小改变，不用提心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。
二. 它的写法
如果你看的博客/书中关于Flexbox的代码是： display:box; 或者属性是 box-{*}，那你看的是2009年以前的版本；
如果你看的博客/书中关于Flexbox的代码是： display:flexbox; 或者 flex() 函数，那你看到的是2011年的青涩少年；
如果你看的博客/书中关于Flexbox的代码是： display:flex; 并且属性是 flex-{*} 那你看到的是现在（2012-2013年）的版本。
Quick hits with the Flexible Box Model (这篇文章写得早, 最新的Flex写法已经不是这样, 但是代码还是具有参考意义的)
三. 新旧语法对比
| Final syntax | 2009 syntax | 2011 hybrid syntax |
|---|---|---|
| display: flex | display: box | display: flexbox |
| flex-direction: row | box-orient: horizontal | box-orient: horizontal |
| justify-content: flex-start | box-pack: start | box-pack: start |
| align-items: flex-start | box-align: start | box-align: start |
| flex: 1 | box-flex: 1 | flex: 1 |
四. 它的兼容性
1. 所有Firefox 22-25都只是部分支持这个属性;
2. Chrome 28以上都能很好的支持;
3. IE 10部分支持, IE 11支持;
4. 更多浏览器兼容性看Can I Use.
参考资料:
