一個典型的flex布局，兼容性比較好
阿新 • • 發佈：2017-09-25
ati flex 垂直居中 content footer tom light round nes
html 代碼：
<body class="flex-wrap col-flex">
<header class="midCenter flex-wrap row-flex">我是標題</header>
<div class="page flex-wrap col-flex">
<div class="scroll-wrap">
<section class="midCenter flex-wrap" id="banner">
<div>我是banner</div>
</section>
<section id="quirk" class="flex-wrap row-flex">
<div></div>
<div class="flex-wrap col-flex">
<div></div>
<div></div>
</div>
</section>
<section id="four-col" class="flex-wrap row-flex">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section id="two-col" class="flex-wrap row-flex">
<div></div>
<div></div>
</section>
<section id="three-col" class="flex-wrap row-flex">
<div></div>
<div></div>
<div></div>
</section>
</div>
</div>
<footer class="flex-wrap row-flex">
<div></div>
<div></div>
<div></div>
<div></div>
</footer>
</body>
css代碼：
html{
height:100%;
}
body{
background: #fff;
margin:0;
padding:0;
width: 100%;
height: 100%;
}
/** 水平伸縮容器**/
.row-flex{
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-direction: normal;
-webkit-box-direction: normal;
-moz-box-lines: multiple;
-webkit-box-lines: multiple;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
/** 垂直伸縮容器**/
.col-flex{
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-direction: normal;
-moz-box-lines: multiple;
-webkit-box-lines: multiple;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
}
/** 伸縮容器**/
.flex-wrap{
/** 各種版本兼容**/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
/** 垂直居中**/
.midCenter{
/** 垂直居中核心**/
-moz-box-pack: center;
-webkit-box-pack: center;
box-pack:center;
-moz-box-align: center;
-webkit-box-align: center;
box-align: center;
box-pack:center;
-ms-flex-pack:center;
display: -ms-flexbox;
-ms-flex-align:center;
justify-content:center;
align-items: center;
}
/** 占位器**/
.page{
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
overflow: hidden;
}
/** 真正滾動**/
.scroll-wrap{
position: relative;
width: 100%;
height: 100%;
overflow: scroll;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
/** 頭和尾巴**/
header,footer{
background:#f7f7f7;
height:44px;
}
footer>div{
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
border:1px solid #666;
margin:4px;
}
section{
margin:3px 5px;
}
/** 真正設置高度 **/
#banner{
border:2px solid #999;
margin:1px;
height:100px;
}
#quirk,#four-col{
height:150px;
}
#three-col,#two-col{
height:100px;
}
/** 內部組件**/
#four-col>div,#three-col>div,#two-col>div{
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
#four-col>div{
background: #aaebbe;
margin:0 2px;
}
#three-col>div{
background: #8f82bc;
margin:0 2px;
}
#two-col>div{
background: #f7baba;
margin:0 2px;
}
#quirk>div{
margin:0 2px;
}
#quirk>div:nth-child(1){
background: #b9e2ee;
-webkit-box-flex: 200;
-moz-box-flex: 200;
-ms-flex: 200;
-webkit-flex: 200;
flex: 200;
}
#quirk>div:nth-child(2){
-webkit-box-flex: 175;
-moz-box-flex: 175;
-ms-flex: 175;
-webkit-flex: 175;
flex: 175;
}
#quirk>div:nth-child(2)>div:nth-child(1){
background: #b9e2ee;
-webkit-box-flex: 60;
-moz-box-flex: 60;
-ms-flex: 60;
-webkit-flex: 60;
flex: 60;
margin-bottom: 4px;
}
#quirk>div:nth-child(2)>div:nth-child(2){
background: #b9e2ee;
-webkit-box-flex: 30;
-moz-box-flex: 30;
-ms-flex: 30;
-webkit-flex: 30;
flex: 30;
}
一個典型的flex布局，兼容性比較好