一个典型的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上需要单独加一下兼容才 ...
随机推荐
- SmartSql使用教程（3）——SmartSql中的事务，及AOP的使用
一.引言 经过两章的铺垫,我们现在对SmartSql已经有了一定的了解,那么今天我们的主题是事务处理.事务处理是常用的一种特性,而SmartSql至少提供了两种使用事务的方法.一种是通过Reposit ...
- React 从入门到进阶之路（六）
之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 .双向数据绑定.接下来我们将介绍 React 表单详解 约束性和非约束性组件 inpu ...
- IntelliJ IDEA-Git提交和更新
提交和更新 通过上一个知识点创建项目的操作之后,就拿到了一个自己的项目在IDEA里进行提交和更新是非常方便的,接下来就会进行演示 修改HiWorld 把HiWorld随便改改,只要和以前不一样就行 提 ...
- OPENGL_单位长度对应屏幕像素
gluPerspective(GLdouble fovy,GLdouble aspect,GLdouble zNear,GLdouble zFar) fovy:视角,指定视景体的视野的角度,以度数为单 ...
- LCT 动态树 模板
洛谷:P3690 [模板]Link Cut Tree (动态树) /*诸多细节,不注意就会调死去! 见注释.*/ #include<cstdio> #include<iostream ...
- 面向对象-mixin设计模式的应用（多继承应用场景）
什么是设计模式? 设计模式只是一种开发思想.不是什么固定的格式. 前人的好的思想,我们后人拿过来用! mixin设计模式: 1.mixin设计迷失可以在不对类的内容的修改前提下,扩展类的功能(添加父类 ...
- 康少带你手撸orm
orm 什么是orm? 对象关系映射: 一个类映射成一张数据库的表 类的对象映射成数据库中的一条条数据 对象点数据映射成数据库某条记录的某个值 优点:不会写sql语句的程序员也可以很6的操作sql语句 ...
- bzoj5148:[BeiJing2018]Kakuro
传送门 有上下界最小费用可行流,行列建边变形. 行列建边相信大家都做过,没做过的可以看一下这个题:bzoj3698XWW的难题,对应的我写的题解题解 这个题需要变形一下,不只是单纯的对行列进行连边,首 ...
- java对mongodb数据库的简单操作
准备工作: 下载好mongodriver.jar包(https://oss.sonatype.org/content/repositories/releases/org/mongodb/mongodb ...
- [題解] luogu p1220 關路燈
區間dp 题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏一盏地关掉这些路灯. ...