CSS3弹性盒模型新老版写法差异

1、在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box:

    新版弹性盒模型:display: flex
    老版弹性盒模型:display: -webkit-box

2、box-orient 定义盒模型的主轴方向

    新版:flex-direction:
            row
            column
    老版:-webkit-box-orient:
            horizontal 水平显示
            vertical   垂直方向

3、box-direction 元素排列顺序

    新版:flex-direction:
            row-reverse
            column-reverse
    老版:-webkit-box-direction:
            normal  正序
            reverse 反序

4、box-pack 主轴方向富裕的空间管理

    新版:justify-content: 
            flex-start
            flex-end
            center
            space-between
            space-around
    老版:-webkit-box-pack:
            start   所有子元素在盒子左侧显示,富裕空间在右侧
            end     所有子元素在盒子右侧显示,富裕空间在左
            center  所有子元素居中
            justify 富裕空间在子元素之间平均分布

5、box-align 侧轴方向方向富裕的空间管理

    新版:align-items:
            flex-start
            flex-end
            center
            baseline
    老版:-webkit-box-align
            star   所有子元素在据顶
            end    所有子元素在据底
            center 所有子元素居中

6、Box-flex 定义盒子的弹性空间

    新版:flex-grow
    老版:-webkit-box-flex
        子元素的尺寸 = 盒子的尺寸 * 子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

7、box-ordinal-group 设置元素的具体位置

    新版:order
    老版:-webkit-box-ordinal-group
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。