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. sp里拼接html table标签

    DECLARE @xml NVARCHAR(MAX) --generate mail body SET @xml = CAST(( SELECT --[ID] 'td','' -- ,[Status] ...

  2. Java - 关于扩展线程安全类的一些思考

    重用可以节省我们进行开发和测试(测试比我们自己测严谨地多)的时间和其他各种成本. 但是,对一个线程安全类进行扩展的时候就需要思考一些问题. 比如我们熟知的线程安全类Vector,该类中对所有的公有方法 ...

  3. 一：SpringMVC架构流程

    架构流程: 1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理器映射器. 3.处理器映射器根据请求url ...

  4. PLSQL-12.0.7.1837注册码

    product code: 4vkjwhfeh3ufnqnmpr9brvcuyujrx3n3le serial Number:226959 password: xs374ca LicenseNumbe ...

  5. maven filter不起作用

    遇到的一个坑, spring boot + maven maven fileter没有起作用.spring boot把默认占位符改了 参考:https://blog.csdn.net/mn960mn/ ...

  6. CentOS 编译 openjdk

    1. 概述 <<深入理解Java虚拟机--JVM高级特性与最佳实践>>第一章就谈到自己编译jdk,来吧. 2.  编译环境 VMware12 CentOS-7-x86_64-E ...

  7. C++中long是什么类型

    long long本质上还是整型,只不过是一种超长的整型. int型:32位整型,取值范围为-2^31 ~ (2^31 - 1) .long:在32位系统是32位整型,取值范围为-2^31 ~ (2^ ...

  8. js结构化命名的思考

    var koooke ={androidShare:{ show : function() {alert(1000)}}};koooke.androidShare.show(); 以上JS是偶然缩写. ...

  9. 解决 sourcetree git ssh私钥问题

    最近遇到个问题,git仓库用gitbash,更新和提交都是没问题的,用界面化工具SourceTree就一直提示下面信息: git -c diff.mnemonicprefix=false -c cor ...

  10. 异步nodejs代码的同步样子写法样例

    异步nodejs代码的同步样子写法样例 js的异步嵌套太深代码将不好看.尤其在用node的时候这种情况会大量出现. 这里用node连接redis,做一个用户注册的简单例子来说明.例如用redis做存储 ...