css3 box 相关属性

详见此文：css box-flex介绍

文档：https://developer.mozilla.org/en-US/search?q=box，我还是喜欢火狐开发社区的文档。

display:box有以下比较有意思的属性：

• box-flex:number,其实就是计算占父元素（或者剩下的宽度）宽度的比例 ，请点击此处demo
• box-align:start | center | end | baseline | stretch，就是对齐方式，子元素相对父元素的边界进行对齐的方式，请点击此处demo
• box-orient:horizontal | vertical | inline-axis | block-axis | inherit ,这个是排列方式，无非就是横排还是竖排，虽然给了四个属性设置。 请点击此处demo
• box-lines:single | multiple。子元素是否换行，请点击此处demo
• box-pack:start | center | end | justify。子元素如何布局，请点击此处demo
• box-ordinal-group:number，决定子元素的排序，还记得当年使用浮动和负边距把123布局改成213布局的经典案例么？如今，不需要这么复杂啦。请点击此处demo

还有box-direction属性，有顺序和反转两个值。但是我觉得和box-ordinal-group有些重合了。

转载于:https://www.cnblogs.com/my_front_research/archive/2013/01/09/2853496.html