码迷,mamicode.com
首页 > Web开发 > 详细

css弹性布局

时间:2016-03-30 00:01:32      阅读:384      评论:0      收藏:0      [点我收藏+]

标签:

@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;
}    
    
    
    
    
    
    
    

 

css弹性布局

标签:

原文地址:http://www.cnblogs.com/webday/p/5335304.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!