您的位置：首页 > 其它

一个典型的flex布局，兼容性比较好

2017-09-25 11:18 501 查看
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;
}


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航