一个典型的flex布局，兼容性比较好
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布局，兼容性比较好的更多相关文章
- IE 11 flex布局兼容性问题 ---- 不支持min-height 和flex:1
由于最近项目要嵌入其它平台,所以要做IE11 的兼容,那就用IE11打开网页看一看,一看吓一跳,页脚直接到了页眉的下面,并把主要内容覆盖了,也就是stick footer 布局失效了,我写了一个简易的 ...
- flex布局兼容性写法
CSS样式 flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水 ...
- Flex 布局知识点梳理
传统的布局方案,在针对特殊布局时会很不方便,比如垂直居中,把一个容器等分为N列等等.自从 Flex 出现以后,这些都迎刃而解了,本文对Flex相关内容做一个简单梳理. 什么是 Flex Flex 是 ...
- flex 布局方式
开始啦 1. flex-direction 有关主轴的对齐方式 column 自上到下 row 自左到右 -->默认值 row-reverse 自右到左 column-reverse 自下到上 ...
- 谈谈flex布局实现水平垂直居中
我们在这要谈的是用flex布局来实现水平和垂直居中.随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中.所以09年,W3C 提出了一种新的方案 ...
- button 使用 flex 布局的兼容性问题
button 使用 flex 布局的兼容性问题 在低版本的手机系统中, button 不能够作为 flex 元素,即使在 CSS 中指定了 display: flex 且 autoprefixer 也 ...
- css3 flex布局结合transform生成一个3D骰子
预览地址: https://zhaohh.github.io/flex-dice/index.html 1 Flex 布局 首先聊聊Flex 布局,Flex 布局又称"弹性布局", ...
- 关于flex布局中的兼容性问题
这几天在做项目中用到了flex布局,但是在测试的过程中发现他的兼容性实在是太差了,仅仅用到水平和垂直居中的样式,没想到兼容性代码就写了好几行. display:flex; display:-webki ...
- flex布局在ios8上的兼容性问题
最近在做项目时,使用到了flex布局.其他ios版本都还好,唯独在ios8上遇到了flex布局没起作用的问题.后来经过研究才发现,safari使用的是webkit内核,在ios8上需要单独加一下兼容才 ...
随机推荐
- POJ - 2312 Battle City BFS+优先队列
Battle City Many of us had played the game "Battle city" in our childhood, and some people ...
- hyperledger fabric 1.0.5 分布式部署 （四）
chaincode 的开发 作者在hyperledger fabric 1.0.5 分布式部署 (三)中向读者介绍了如何开发fabric 的chaincode,那么实际上chaincode 还有其他的 ...
- AttributedString 图片间距问题
1.NSMutableAttributedString如何显示图片 NSMutableAttributedString *vipStr = [[NSMutableAttributedString al ...
- JQuery Easyui/TopJUI表格基本的删除功能（删除当前行和多选删除）
需求:数据表格datagrid实现删除当前行和多选删除的功能. html <a href="javascript:void(0)" data-toggle="top ...
- （转）cookie和session的区别
转自 http://www.cnblogs.com/shiyangxt/archive/2008/10/07/1305506.html http://justsee.iteye.com/blog/15 ...
- A - Beautiful numbers
#include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...
- JSP && Servlet | 错误统一处理
对404错误和500错误处理: 在WebContent文件下新建404.jsp 和 500.jsp 显示错误时弹出的信息 <%@ page language="java" c ...
- [題解]（縮點）luogu_P2341受歡迎的牛
對於每個強聯通分量,這些牛一定都互相喜歡,所以縮點(我也不知道怎麼想到的) 接下來就是統計答案,最後縮成了一個DAG圖,如果這個點是明星的話,其他每個點一定直接或間接的鏈接這個點 也就是說其他點一定有 ...
- __getitem__,__setitem__,__delitem__
__getitem__.__setitem__.__delitem__ 总结: __getitem__,__setitem_,__delitem__ : obj[‘属性’]的方式去操作属性时触发的方法 ...
- [CF1111D] Destory the Colony
Portal 大致题意: 给定一个偶数长度(\(n \leq 10 ^ 5\))的字符串, 只包含大小写字母. 有q(\(q \leq 10 ^ 5\))次询问, 每次指定两个位置, 要求通过交换字符 ...