display : -webkit-box;
display : box;
box-orient:vertical;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
}
/*根据网页内容的现实需要，借助弹性盒模型调整各个板块的显示顺序*/
#box1 {/*设置第一个元素显示在第二个位置*/
-moz-box-ordinal-group : 2;/*兼容Mozilla Gecko引擎*/
-webkit-box-ordinal-group : 2;/*兼容Webkit引擎*/
box-ordinal-group : 2;/*标准用法*/
}
#box2 {/*设置第二个元素显示在第三个位置*/
-moz-box-ordinal-group : 3;/*兼容Mozilla Gecko引擎*/
-webkit-box-ordinal-group : 3;/*兼容Webkit引擎*/
box-ordinal-group : 3;/*标准用法*/
}
#box3 {/*设置第三个元素显示在第一个位置*/
-moz-box-ordinal-group : 1;/*兼容Mozilla Gecko引擎*/
-webkit-box-ordinal-group : 1;/*兼容Webkit引擎*/
box-ordinal-group : 1;/*标准用法*/
}
#box4 {/*设置第四个元素显示在第四个位置*/
-moz-box-ordinal-group : 4;/*兼容Mozilla Gecko引擎*/
-webkit-box-ordinal-group : 4;/*兼容Webkit引擎*/
box-ordinal-group : 4;/*标准用法*/
}
</style>
演示效果：
以上就是关于CSS3弹性盒模型基础开发知识总结，希望对大家认识CSS3弹性盒模型有所帮助。
本文地址：http://blog.csdn.net/lovejulyer/article/details/51231951
