常用页面布局 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:
<div class="box">
    <div class="item">11</div>
</div>


// 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:
<div id="box">            
    <div class="left">left：100px</div>
    <div class="right">right:自适应宽度</div>
</div>

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:
<div id="grid">
        <div class="grid-cell">
            <div class="grid-item">固定50px</div>
            <div class="grid-item auto-item">auto</div>
            <div class="grid-item">固定50px</div>
        </div>
        <div class="grid-cell">
            <div class="grid-item">1/2</div>
            <div class="grid-item">1/2</div>
        </div>
        <div class="grid-cell">
            <div class="grid-item">1/4</div>
            <div class="grid-item auto-item">auto</div>
            <div class="grid-item">1/2</div>
            <div class="grid-item auto-item">auto</div>
        </div>
    </div>
</div>

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:
<div id="body">
    <header class="top">top</header>
    <div class="contents">contnts</div>
</div>

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:
<div id="body">
    <header class="top">top:50px</header>
    <div class="contents">
        <div class="sideBar">sideBar</div>
        <div class="center">center</div>
    </div>
    <footer class="foot">foot:50px</footer>
</div>

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