弹性盒模型

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

ps：这里遇到了小问题，还没解决。在火狐中，识别不了-moz-Box；反而识别了-webkit-Box；

原因找到后会补上

Box-orient 定义盒模型的布局方向（给父元素设置的），值vertical垂直，horizontal水平（默认）。

Box-direction 元素排列顺序。感觉浏览器对有些属性的支持真的差距好大啊。

值noramal正序，reverse倒序。

如下图，上面是firefox 下面是chrome

Box-ordinal-group 设置元素的具体位置，即混序排列，属性为数字

举个栗子

  .div1 div:nth-of-type(1){
        -moz-Box-ordinal-group: 4;-webkit-Box-ordinal-group: 4;
    }
    .div1 div:nth-of-type(2){
        -moz-Box-ordinal-group:2; -webkit-Box-ordinal-group: 2;
    }
    .div1 div:nth-of-type(3){
        -moz-Box-ordinal-group: 5;-webkit-Box-ordinal-group: 5;
    }
    .div1 div:nth-of-type(4){
        -moz-Box-ordinal-group: 1;-webkit-Box-ordinal-group: 1;
    }
    .div1 div:nth-of-type(5){
        -moz-Box-ordinal-group: 3;-webkit-Box-ordinal-group: 3;
    }

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

子元素的尺寸=盒子的尺寸*子元素的Box-flex属性值 / 所有子元素的Box-flex属性值的和

简单地说子元素尺寸=子元素Box-flex值/总Box-flex值

如果有子元素定宽，计算的时候忽略~

举个栗子最后一个div定宽，其他子元素计算尺寸的时候就把最后一个div叉出去了

.div1 div:nth-of-type(1){
        -moz-Box-flex: 1;-webkit-Box-flex: 1;
    }
    .div1 div:nth-of-type(2){
        -moz-Box-flex:2; -webkit-Box-flex: 2;
    }
    .div1 div:nth-of-type(3){
        -moz-Box-flex: 3;-webkit-Box-flex: 3;
    }
    .div1 div:nth-of-type(4){
        -moz-Box-flex: 4;-webkit-Box-flex: 4;
    }
    /* .div1 div:nth-of-type(5){
        -moz-Box-flex: 3;-webkit-Box-flex: 3;
    } */
    .div5{
        width: 100px;
    }


    <div class="div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div class="div5">100px width</div>
    </div>

Box-pack 对盒子富余的水平空间进行管理

Start 所有子元素在盒子左侧显示，富裕空间在右侧

End 所有子元素在盒子右侧显示，富裕空间在左侧

Center所有子元素居中

Justify 富余空间在子元素之间平均分布

我以为，分别类似于word的居左/居右/居中/两端对齐

（太简单了不举例子了）

Box-align 对盒子富余垂直空间管理

值有start/end/center；分别是上/下/中放置元素，其他地方空余

emmmm 以后写博客要给标题什么的加上格式了。。

弹性盒模型

相关文章