css弹性布局

Posted 2020-07-01

@charset "UTF-8";
/* CSS Document */


p{
    width:200px;
    border:5px solid green;
    background-color:orange;
    margin:15px;
    padding:15px;

}

div{
    
    /*
    display:-moz-box;    将块级元素变为快级弹性伸缩元素
    display:-webkit-box;
    -moz-box-orient:vertical;      伸缩项目从上到下垂直排列
    -moz-box-orient:block-axis;
    -moz-box-orien t:inline-axis;     伸缩项目从左到右排列
    -moz-box-orient:horizontal;
    
    -moz-box-direction: reverse;     文字方向从右到左，逆序，normal默认正序
    
    width:100%;
    
    -moz-box-pack:end;        
    -webkit-box-pack:center;
    -webkit-box-pack:justify;        等分文本
    
    -webkit-box-align:start;
    -webkit-box-align:end;
    -webkit-box-align:baseline;*/
    display:-moz-box;   
    display:-webkit-box;     宣告可以变更布局
    
}

p:nth-child(1){
    -webkit-box-flex:1;
    -webkit-box-ordinal-group:2;    /* 更改显示顺序*/
}
    
p:nth-child(2){
    -webkit-box-flex:3 ;
    -webkit-box-ordinal-group:1;
}
        
p:nth-child(3){
    -webkit-box-flex:1 ;
    -webkit-box-ordinal-group:3;
}