CSS样式

  • flex：定义布局为盒模型
  • flex-v：盒模型垂直布局
  • flex-1：子元素占据剩余的空间
  • flex-align-center：子元素垂直居中
  • flex-pack-center：子元素水平居中
  • flex-pack-justify：子元素两端对齐
.flex {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

}

.flex-v {

    -webkit-box-orient: vertical;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column;

}

.flex-1 {

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

}

.flex-align-center {

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

}

.flex-pack-center {

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

}

.flex-pack-justify {

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between;

}

　兼容性：ios 4+、android 2.3+、winphone8+

　

示例-两端对齐

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta content="email=no" name="format-detection">

<style type="text/css">

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}

.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}

.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}

.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

</style>

</head>

<body>

<div class="flex flex-pack-justify">

    <div>模块一</div>

    <div>模块二</div>

    <div>模块三</div>

    <div>模块四</div>

</div>

</body>

</html>

　　图示

原文地址：http://blog.csdn.net/u010035608/article/details/52711248

flex布局兼容性写法的更多相关文章

  1. Flex布局新写法兼容写法详解

    很久之前用过flex,但是没有考虑过兼容性问题,为了兼容ios一定要加上-webkit前缀: ul{ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ ...

  2. IE 11 flex布局兼容性问题 ---- 不支持min-height 和flex:1

    由于最近项目要嵌入其它平台,所以要做IE11 的兼容,那就用IE11打开网页看一看,一看吓一跳,页脚直接到了页眉的下面,并把主要内容覆盖了,也就是stick footer 布局失效了,我写了一个简易的 ...

  3. display: flex的兼容性写法

    display: -moz-box; /*firefox*/ display: -ms-flexbox; /*IE10*/ display: -webkit-box; /*Safari*/ displ ...

  4. 学习flex布局（弹性布局）

    Flex是Flexible Box的缩写,意为弹性布局.是W3C早期提出的一个新的布局方案.可以便捷的实现页面布局,目前较高版本的主流浏览器都能兼容,兼容情况如下: Flex在移动端开发上已是主流,比 ...

  5. Flex布局新旧混合写法详解（兼容微信）

    原文链接:https://www.usblog.cc/blog/post/justzhl/Flex布局新旧混合写法详解(兼容微信) flex是个非常好用的属性,如果说有什么可以完全代替 float 和 ...

  6. list之flex布局写法

    list之flex布局写法 移动端实际场景中经常会遇到将header置顶,然后下面list需要滚动的情况,通常的做法会是将header使用fixed的方式固定到顶部,然后list主体相对于header ...

  7. 关于flex布局中的兼容性问题

    这几天在做项目中用到了flex布局,但是在测试的过程中发现他的兼容性实在是太差了,仅仅用到水平和垂直居中的样式,没想到兼容性代码就写了好几行. display:flex; display:-webki ...

  8. button 使用 flex 布局的兼容性问题

    button 使用 flex 布局的兼容性问题 在低版本的手机系统中, button 不能够作为 flex 元素,即使在 CSS 中指定了 display: flex 且 autoprefixer 也 ...

  9. Flex 布局新旧混合写法详解（兼容微信）

    flex 是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持 flex 的浏览器).然而国内很多浏览器对 flex 的支持都 ...

随机推荐

  1. Hadoop实战之四~hadoop作业调度详解(2)

    这篇文章将接着上一篇wordcount的例子,抽象出最简单的过程,一探MapReduce的运算过程中,其系统调度到底是如何运作的. 情况一:数据和运算分开的情况 wordcount这个例子的是hado ...

  2. 【转】.NET 4.5 使用async和await关键字调用异步方法

    async和await关键字是.NET 4.5新增加的异步编程方式,通过使用这两个关键字可以轻松便捷的编写异步方法.使用async关键字声明异步方法,使用await关键字等待和获取异步方法返回的结果. ...

  3. redis(4)事务

    一.事务 一般来说,事务必须满足4个条件,也就是我们常说的ACID: 1)Atomicity 原子性:一个事务中的所有操作要么全部完成,要么全部不完成,不会结束在中间的某个环节.事务在执行过程中发生错 ...

  4. 一个最简单的LRUCache实现 (JAVA)

    流程图: 1. 代码 import java.util.ArrayList; public class LRUCache { private int cacheMaxSize = 0; private ...

  5. Heka 的配置文件加载逻辑

    Heka 使用的是 TOML 格式的配置文件, 有关 golang 加载 TOML 配置文件的技术请参看:  http://www.cnblogs.com/ghj1976/p/4082323.html ...

  6. 无限滚动条的css布局理解

    一.需求描述 做一个waymo的滚动条,在页面中显示两张图,一共4张图,无限滚动播放. .car{ width: 600px; height: 157px; margin: 100px auto; b ...

  7. linux系统下php扩展的安装

    0. 这里以php安装redis扩展为例 1. 首先下载并解压redis扩展包 [root@xxx ~]# cd /usr/local/src [root@xxx src]# wget https:/ ...

  8. Python入门-深浅拷贝

    首先我们在这里先补充一下基础数据类型的一些知识: 一.循环删除 1.前面我们学了列表,字典和集合的一些操作方法:增删改查,现在我们来看一下这个问题: 有这样一个列表: lst = ['周杰伦','周润 ...

  9. Idea15 常用设置(一)：JDK、SVN

      1:显示行号  File->Settings->General->Appearance 2: 代码自动补齐即使是小写字母也会弹出代码补齐提示     3:自动编译 设置 4: 设 ...

  10. 001Java锁之synchronized

    01.synchronized & Lock synchronized锁同步 软件层面依赖JVM Lock锁同步 硬件层面依赖cpu指令 02.synchronized作用域 方法:锁住对象实 ...