flexbox

@charset "utf-8";

p {
     150px;
    border: 1px solid gray;
    background-color: silver;
    margin: 5px;
    padding: 5px;
}

div {
     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;
}
原文地址:https://www.cnblogs.com/ningjie/p/9614712.html