常用页面布局 flex写法

Flex兼容性写法

父级元素写法

.box{
    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */ 
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */  
}

子元素

.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    -webkit-box-flex: 1     /* 老版本语法 - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* 老版本语法 - Firefox 19- */ 
    flex: 1;                /* Spec - Opera 12.1, Firefox 20+ */
} 

---

1、水平垂直居中样式

// html:

    
11



// css:
.box{
    height:200px;
    width:200px;
    background: #aaa;
    // 下面的这3个样式，顺序不能变。变了就不是垂直水平居中了。
    display:flex;
    align-items:center; //垂直居中
    justify-content:center; //水平居中
}
.item{
    width:30px;
    height:100px;
    background:#ff0;
}

左边固定宽度，右边占满宽度

html:
            
    
left：100px
    
right:自适应宽度


css:
#box{
    width:400px;
    height:200px;
    border:1px solid #000;
    display:flex;
}
.left{
    width:100px;
    height:100%;
    background: #FFFF00;
}
.right{
    height：100%;
    background:#AAAAAA;
    flex:1;

基本网格布局

html:

        

            
固定50px
            
auto
            
固定50px
        
        

            
1/2
            
1/2
        
        

            
1/4
            
auto
            
1/2
            
auto
        
    

css: #grid { width: 400px; height: 200px; border: 1px solid #000; } .grid-cell{ width:100%; height:50px; text-align: center; margin-top: 10px; display: flex; align-items: center; } .grid-item { height: 100%; background: #EEEEEE; } .auto-item{ height:100%; background:#aaffff; border: 1px solid #ffff7f; flex: 1 } .grid-cell:nth-child(2){ justify-content: space-between; } .grid-cell:nth-child(2) .grid-item{ margin:10px; flex:1; } .grid-cell:nth-child(3){ justify-content: space-between; } .grid-cell:nth-child(3) .grid-item:nth-child(1){ flex:1; } .grid-cell:nth-child(3) .grid-item:nth-child(3){ flex:2; }

顶部固定高度，底部占满剩余高度

html:

    
top
    
contnts


css:
#body{
    width:200px;
    height:300px;
    border:1px solid #aaa;
    display: flex;
    flex-direction: column;
}
.top{
    height:50px;
    background:#AAFFFF;
}
.contents{
    background:#dee5df;
    flex:1;
}

顶部、底部固定高度，中间占据剩余高度，siderBar固定宽度，center占据剩余宽度

html:

    
top:50px
    

        
sideBar
        
center
    
    
foot:50px


css:
#body{
    width:400px;
    height:300px;
    border:1px solid #aaa;  
    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */   
    display: flex;
    flex-direction: column;
}
.top,.foot{
    height:50px;
    background:#AAFFFF;
}
.sideBar{
    width: 100px;
    background:#FFFF00;
}
.contents{
    background:#dee5df;
    flex:1;
    display: flex;
}
.center{
    background:#AA55FF;
    flex:1;
}