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. jmeter单一接口测试

    在使用jmeter进行单一接口测试之前,我们先来了解一下一个用户请求的过程,如下: 1)用户通过浏览器发起一个请求: 2)用户收到服务器返回的响应数据. 如上,就是一个WEB的请求/响应模型 jmet ...

  2. Python基础学习总结(二）

    2.列表简介 Python有内置的一种数据类型列表:list. list是一种有序的集合. 列表由一系列按特定顺序排列的元素组合.用方括号 [ ] 来表示. list里面的元素的数据类型可以不同,比如 ...

  3. JBPM学习第4篇：10分钟熟悉Eclipse

    http://download.jboss.org/jbpm/videos/7.0.0.Final_eclipse_getting_started.swf 打开视频练习 1.导入 evaluation ...

  4. Effective C++ .07 virtual析构函数的提供

    主要讲了, 1. virtual析构函数的作用与调用顺序 2. 使用时机,并不是使用了继承就要把基类的析构函数变为虚函数(virtual),只有当用于多态目的时才进行一个virtual析构函数的定义. ...

  5. JS之原型式的继承

    创建一个Person的构造器 function Person(first, last, age, gender, interests) { this.name = { first, last }; t ...

  6. chrome中常用的快捷键

    ctrl+n 新建窗口ctrl+shift+n 无痕模式新建窗口ctrl+t 打开新标签页ctrl+shift+t 打开最近关闭的标签页ctrl+tab 标签页之间切换ctrl+w/ctrl+F4 关 ...

  7. JavaScript练习笔记整理·1 - 6.23

    练习平台Codewars地址:https://www.codewars.com/ 欢迎和大家一起来讨论~╭( ･ㅂ･)و ̑̑   基础练习(1):   我的解答为: class SmallestIn ...

  8. 29_Future模式2_JDK内置实现

    [Future使用场景] Future表示一个可能未完成的一部任务的结果,针对这个结果可以添加CallBack,以便在任务执行成功或失败后作出相应的操作. Future模式非常适合在处理耗时很长的业务 ...

  9. Page Cache的落地问题

    除非特别说明,否则本文提到的写操作都是 buffer write/write back. 起因 前几天讨论到一个问题:Linux 下文件 close成功,会不会触发 “刷盘”? 其实这个问题根本不用讨 ...

  10. 【Python之搜索引擎】（一）概述

    learning goal--search engine 1.Find datas - crawl 2.Index 3.page rank String操作 提取网络中的链接 Extracting a ...