自适应布局webkit-box的用法

Flexible Box Model(灵活盒子模型)

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

1、box-orient          在父元素上设置   子元素排列 vertical (垂直) or horizontal（水平）

2、box-flex               在子元素上设置   兄弟元素之间比例，仅作一个系数

3、box-align             在父元素上设置    box 排列

4、box-direction    在父元素上设置    box 方向  可设置reverse排序相反

5、box-flex-group  在子元素上设置   以组为单位的流体系数

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

7、box-pack              在父元素上设置   可设置center和vertically


以下是关于flexible box的几个实例

1、三列自适应布局，且有固定margin

    

1

    

2

    

3

2、当一列定宽，其余两列分配不同比例亦可(三列布局，一列定宽，其余两列按1：2的比例自适应)：

    

200px

    

比例1

    

比例2

3、一个常见的web page 的基本布局：

    

Header

    

        

定宽200

        

比例3

        

比例1

    

    

Footer

 

更详细的可以查看--->这里

转载于:https://www.cnblogs.com/leena/p/6123005.html