读书人

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

发布时间: 2013-04-20 19:43:01 作者: rapoo

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

Flexible box布局模型

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

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

浏览器支持

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

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

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

.....

via 极客标签

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

读书人网 >flex

热点推荐