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. Spring学习笔记：jdbcTemplate和数据源配置

    一.使用Spring框架jdbcTemplate实现数据库的增删改查 1.数据库 /* SQLyog Ultimate v8.32 MySQL - 5.7.19-log : Database - in ...

  2. 注册中心zookeeper-3.4.6集群以及高可用

    zookeeper是什么 百度定义: ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件. 它是一个为 ...

  3. 建一个springboot项目

    1.打开 https://start.spring.io/ 新建一个maven的demo,这里选择的是1.5.18的版本 2.将自动生成的demo导入eclipse,直接选中File里的import, ...

  4. BBS需求分析和orm设计

    一.BBS博客需求分析 首页(现实文章) 文章详情 点赞 文章评论(子评论,评论的展示) 登录功能(图片验证码) 注册功能(基于form验证) 个人站点(不同人不同样式,文章过滤) 后台管理(文章展示 ...

  5. java idea+ssm框架遇到的问题

    0.学习教程 http://www.cnblogs.com/jiekzou/p/9205117.html https://github.com/crossoverJie/SSM 1.gradle没刷新 ...

  6. Linux基础之命令练习Day7-nginx，nfs

    一. Nginx Nginx("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗 ...

  7. 关于建立Android工程R文件丢失的问题

    今天开始学习Android了,好久没打开eclipse,建立Android工程老是报错,于是手残的把appcompat-v7给删了,然后建立工程以后重新出来的appcompat-v7有个小叉号,百度了 ...

  8. 从尾到头打印链表（C++和Python 实现）

    (说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 输入一个链表的头结点, 从尾到头反过来打印出每个结点的值. ...

  9. C++ virtual inheritance ZZ

       虚继承 是面向对象编程中的一种技术,是指一个指定的基类,在继承体系结构中,将其成员数据实例共享给也从这个基类型直接或间接派生的其它类. 举例来说:假如类A和类B各自从类X派生(非虚继承且假设类X ...

  10. pt-deadlock-logger使用

    死锁监控pt-deadlock-logger 首先我们要创建一个表用来保存死锁的信息: CREATE TABLE deadlocks ( server ) NOT NULL, ts timestamp ...