flexbox

@charset "utf-8";

p {

    width: 150px;

    border: 1px solid gray;

    background-color: silver;

    margin: 5px;

    padding: 5px;

}

div {

    width: 100%; //必须有宽度扩大盒子的宽度 不然 end center justify 没效果

    display: -moz-box;

    display: -webkit-box;

    display: box;

// 行 还是块

    /*-moz-box-orient: vertical;*/

    /*-moz-box-orient: inline-axis;*/

    /*-moz-box-orient: block-axis;*/

    /*-moz-box-direction: reverse;*/ 倒叙

//水平

    /*-moz-box-pack: end;*/

    /*-moz-box-pack: center;*/

    /*-moz-box-pack: justify;*/

    /*-webkit-box-pack: justify;*/

//额外空间

    /*-moz-box-align: start;*/ 向上

    /*-moz-box-align: end;*/ 底部

    /*-moz-box-align: center;*/中间

    /*-moz-box-align: baseline;*/ 开头

}

//切换顺序

p:nth-child(1) {

    -moz-box-flex: 1;

    -moz-box-ordinal-group: 2;

}

p:nth-child(2) {

    -moz-box-flex: 3;

    -moz-box-ordinal-group: 1;

}

p:nth-child(3) {

    -moz-box-flex: 1;

    -moz-box-ordinal-group: 3;

}