使用Flexbox布局方式的简单演示

日期：2013-4-4  来源：GBin1.com

众所周知，CSS有多重布局模型的操作，可以使页面按照不同的布局进行展现。Flexble box是另一种布局模型，简称为Flexbox。它如今经过重写，使得在编码和使用上得到非常有效的简化。

关于Flexbox的介绍请关于文章: CSS的未来 - 游戏的改革者FLEXBOX。

Flexible box布局模型

Flexbox中有两个轴，一个主轴和一个横轴。主轴是主要的轴，横轴是垂直于主轴的。每一个轴都有它相关联的维度和起点/终点。不论是在容器中还是容器本身都有一定的高度和宽度。

浏览器支持

目只有一部分浏览器支持Flexbox，而对于支持Flexbox的浏览器而言，也不是所有版本都可以达到最新Flexbox的语义。

浏览器对Flexbox的支持情况如下所示：

• Opera(12.1) - 支持当前最新Flexbox，不需要任何前缀标识。
• Chrome(23.0) - 支持当前最新Flexbox，需要添加前缀标识:-webkit
• Safari(5.1) - 支持旧版本的Flexbox，需要添加前缀标识:-webkit

.....

via 极客标签

来源：使用Flexbox布局方式的简单演示