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. PowerShell 惠普打印机双面驱动自动设置已安装

    win10系统,使用实验室的HP P2055dn打印机.每次关机重连后,都会把默认的双面打印机的设置改回“未安装”,需要手动改成“已安装”.感觉是个bug,win7的时候关机后状态还会保持. 每次连上 ...

  2. [javaEE] tomcat内部连接池

    在META-INF的目录下,新建context.xml 在程序中获取数据源,通过jndi,这个jndi必须在Servlet中才能获取,并且需要配置web.xml使servlet一启动就拿到数据源 co ...

  3. Hibernate学习1--对象持久化的思想

    前些天开始接触hibernate,想想以前直接用c3p0进行笨拙而繁杂的数据库操作就觉得生无可恋了,也正因如此,在刚刚接触hibernate的我,便强烈地喜欢上这种偷懒而优雅的面向对象式操作数据库的方 ...

  4. 同步ajax请求

    /* * 发送同步ajax请求的函数 CreateBy 秋水 */ function syncAjax(data) { var resp = null; $.ajax({ type : "P ...

  5. Python基础学习总结(三）

    4.if语句 If语句可以检查判定当前条件,并执行相应措施. if a in A: if a 条件: 执行命令1 4 else: 执行命令2 if判断条件还可以简写 if x: print('True ...

  6. influxdb 端口、数据结构、写数据

    InfluxDB 是一个开源,分布式,时间序列,事件,可度量和无外部依赖的数据库. InfluxDB有三大特性: Time Series (时间序列):你可以使用与时间有关的相关函数(如最大,最小,求 ...

  7. hdu 1011 Starship Troopers 经典的树形DP ****

    Starship Troopers Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  8. Tjoi2016&Heoi2016 字符串

    传送门 另一个传送门 终于把心头大恨切掉了……后缀自动机大法好,从此抛弃后缀数组哈哈……(说的跟你会写后缀数组似的 好像网上的题解大多都是后缀数组?看了看表示理解不能,那我这份后缀自动机的题解就写详细 ...

  9. NOI.AC NOIP模拟赛R3解题报告

    心路历程 预计得分:\(100+100+50=250\) 实际得分:\(10 +100 +50 = 160\) 三道原题,真好.T2做过,T1写了个错误思路,T3写了写50分状压dp. 整场考试实际在 ...

  10. JavaScript 数组对象常用属性

    concat() 用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. var a = ["aa","ccc"]; var b ...