深入理解 CSS3 弹性盒布局模型

来源:互联网 发布:域名紧急访问升级 编辑:程序博客网 时间:2024/04/27 12:00

深入理解 CSS3 弹性盒布局模型

弹性盒布局模型(Flexible Box Layout)是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。这种布局方式已经被主流浏览器所支持,可以在 Web 应用开发中使用。本文详细的介绍该布局模型以及如何在具体开发中应用该布局模型来简化常见的页面布局场景。

文章链接:http://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/

http://www.warting.com/web/201402/68557.html


弹性盒布局模型的浏览器前缀形式
.flex-container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}.flex-item { -webkit-box-flex: auto;-moz-box-flex: auto;-webkit-flex: auto;-ms-flex: auto; flex: auto;}.flex-item { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1;}

0 0
原创粉丝点击