一个典型的flex布局，兼容性比较好
2024-09-04 15:40:38
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;
}
最新文章
- (十四)Maven聚合与继承
- android——判断网络状态
- 实现Android包的批量删除
- AlwaysOn可用性组测试环境安装与配置（一）--SQL群集环境搭建
- 网易前端JavaScript编码规范【转】
- 到底UDP和TCP是什么个概念？
- Vm下 linux与windowsxp文件共享的方法
- 定位CoreLocation
- W英语: 紧急, 非紧急
- jstl标签库示例二
- Centos 7 卸载自带的openjdk
- 平滑升级你的Nginx
- Windows将自己的代码发布到Github上
- js实现获取对象key名
- Android 屏幕手势滑动中onFling()函数的技巧分析
- java futureTask的使用
- 数据库页已标记为 RestorePending，可能表明磁盘已损坏。要从此状态恢复，请执行还原操作。
- Linux command automake
- 【python爬虫】 之 爬取百度首页
- 使用Ansible自动配置JDK环境