本文探讨了在移动应用开发中，如何利用CSS3的-webkit-box属性实现响应式布局，确保APP能在不同尺寸的手机屏幕上自动适应。文章详细介绍了box-orient、box-direction、box-align和box-pack等属性的使用方法，以及它们在Safari、Opera和Chrome浏览器中的兼容情况。
移动布局中自适应-webkit-box
随着现在app的需求越来越多，我们在写代码时，为了能使app在各个版本手机上都能自动适应放大和缩小，css3提出的-webkit-box使用越来越频繁，实现布局的垂直登高/水平均分/按比例划分。
目前没有浏览器支持 box-pack 属性。
Firefox 支持替代的 -moz-box-pack 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-pack 属性。
盒子属性
1）box-orient：子元素排列 vertical（竖排）orhorizontal（横排）
2）box-direction：normal是默认值 reverse表示反转
3）box-align：start–在box-align表示居顶对齐
end–在box-align表示居底对齐
center–在box-align表示居中对齐
4）box-pack：start–在box-pack表示水平居左对齐
end–在box-pack表示水平居右对齐
center–在box-pack表示水平居中对齐
justify–在box-pack表示水平等分父容器宽度（唯一遗憾的
是，firefox与opera暂时不支持，只有safari、chrome支
持）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
