首页 > 代码库 > CSS之自适应布局webkit-box

CSS之自适应布局webkit-box

自适应布局webkit-box,在平常的web横排布局中,会经常用到float或display:inline-block,但是在多种不同宽度的移动设备的自适应布局中用的话,还得设置百分比宽度和考虑清除浮动。而Flexible Box Model可以自动计算宽度和自适应,更加方便。

-webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit,其中默认值是inline-axis,即横向排列

-webkit-box-flex 子元素之间比例,仅作一个系数

-webkit-box-direction 子元素排列顺序 normal | reverse | inherit,其中默认值是normal

-webkit-box-flex-group 以组为单位的流体系数

-webkit-box-ordinal-group 以组为单位的子元素排列方向

-webkit-box-lines 子元素是否换行,类似word-wrap和word-break的作用

-webkit-box-align 子元素垂直方向的对其方式

-webkit-box-pack 子元素水平方向的对其方式

CSS之自适应布局webkit-box