拷贝直接加类名即可

/* 定义 */
.flex-def {
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
} /* 主轴居中 */
.flex-zCenter {
-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
} /* 主轴两端对齐 */
.flex-zBetween {
-webkit-box-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
} /* 主轴end对齐 */
.flex-zEnd {
-webkit-box-pack: end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
} /* 主轴start对齐 */
.flex-zStart {
-webkit-box-pack: start;
-moz-justify-content: start;
-webkit-justify-content: start;
justify-content: start;
} /* 侧轴居中 */
.flex-cCenter {
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
} /* 侧轴start对齐 */
.flex-cStart {
-webkit-box-align: start;
-moz-align-items: start;
-webkit-align-items: start;
align-items: start;
} /* 侧轴底部对齐 */
.flex-cEnd {
-webkit-box-align: end;
-moz-align-items: flex-end;
-webkit-align-items: flex-end;
align-items: flex-end;
} /* 侧轴文本基线对齐 */
.flex-cBaseline {
-webkit-box-align: baseline;
-moz-align-items: baseline;
-webkit-align-items: baseline;
align-items: baseline;
} /* 侧轴上下对齐并铺满 */
.flex-cStretch {
-webkit-box-align: stretch;
-moz-align-items: stretch;
-webkit-align-items: stretch;
align-items: stretch;
} /* 主轴从上到下 */
.flex-zTopBottom {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
} /* 主轴从下到上 */
.flex-zBottomTop {
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
} /* 主轴从左到右 */
.flex-zLeftRight {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
} /* 主轴从右到左 */
.flex-zRightLeft {
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
} /* 是否允许子元素伸缩 */
.flex-item {
-webkit-box-flex: 1.0;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}
/* 子元素的显示次序 */
.flex-order{
-webkit-box-ordinal-group: 1;
-moz-order: 1;
-webkit-order: 1;
order: 1;
}

欢迎访问我的博客http://www.yuanjingzhuang.com/

兼容新旧浏览器的flex写法的更多相关文章

  1. Css3 兼容新旧浏览器

    想想10年前用 IE6,火狐,遨游,谷歌等浏览器学习css时,那叫一个艰苦,各种hack各种抓耳挠腮,不是margin塌陷就是元素飞了... 当前借着css3这个东风,如果各大浏览器厂商能统一一下,也 ...

  2. 一个兼容 node 与浏览器的模块写法

    一个兼容 node 与浏览器的模块写法 // test.js (function (root, factory) { if (typeof define === 'function' &&am ...

  3. JavaScript 兼容新旧版chrome和firefox的桌面通知

    1.新/旧版本的chrome和firefox都可支持,IE下不支持因此设置为了在最小化窗口处闪烁显示提示文字. 2.设置为提示窗口显示5秒即关闭. 3.可设置图标和点击提示窗口要跳转到的页面(见输入参 ...

  4. 【转】HTML5新增元素兼容旧浏览器方法

    ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...

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

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

  6. Flex 布局新旧混合写法详解(兼容微信)

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

  7. Flex布局新旧混合写法详解

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

  8. 使用Flexbox:新旧语法混用实现最佳浏览器兼容

    Flexbox非常的棒,肯定是未来布局的一种主流.在过去的几年这之中,语法改变了不少,这里有一篇“旧”和“新”新的语法区别教程(如果你对英文不太感兴趣,可以移步阅读中文版本).但是,如果我们把Flex ...

  9. css弹性盒子新旧兼容

    前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版 ...

随机推荐

  1. python学习笔记(五)文件操作和集合

    文件基本操作: 现有文件file.txt f=open('file.txt','r')#以只读方式打开一个文件,获取文件的句柄,如果是读的话,r可以不写,默认就是只读:文件不存在时,会报错 first ...

  2. CSS中的flex布局

    1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 ...

  3. HDU 6038 Function —— 2017 Multi-University Training 1

    Function Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total ...

  4. signer information does not match signer information of other classes in the same package

    报错日志: java.lang.SecurityException: class "org.bouncycastle.asn1.ASN1ObjectIdentifier"'s si ...

  5. redis.conf 配置文件介绍

    1: Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2: 当Redis以守护进程方式运行时,Redis默认会把pid写入/var/ru ...

  6. 王爽《汇编》检测9.1(1) | 若要使程序中的jmp指令执行后,CS:IP指向程序的第一条指令,在data段中应该定义哪些数据?

    ;监测点9.1(1) assume cs:code data segment db dup() data ends code segment start: mov ax,data :这一段一定要补上 ...

  7. Redis集群的搭建【转】

    redis集群的特点: 1.机器多,能够保证redis服务器出现问题后,影响较小 2.自备主从结构,自动的根据算法划分主从结构.动态的实现 3.能够根据主从结构自动的实现高可用 4.实现数据文件的备份 ...

  8. STM32 入门之 GPIO

    入手STM32有一段时间了,感觉刚入门时很难,无处下手,现在学到了点皮毛,写出来和大家分享一下. 首先,什么叫GPIO?这个问题,答案是我也不知道!至少目前我没有必要知道,我只要知道他其实就是51单片 ...

  9. 使用iconv提示未知错误

    使用iconv 转化编码的时候提示错误:<b>Notice</b>: iconv() [<a href='http://www.jinyuanbao.cn'>fun ...

  10. appium常见问题04_查看andriod内置浏览器webview版本

    方法一:手机上设置中查看 设置-->应用程序管理-->全部-->Android System WebView 方法二:adb指令查看(前提,已安装android sdk环境) 1,w ...