Flex布局新写法兼容写法详解

很久之前用过flex,但是没有考虑过兼容性问题,为了兼容ios一定要加上-webkit前缀:

ul{
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-flex;
}
li{
     flex:1 0 auto;
    -webkit-flex:1 0 auto; 合并写法,不缩放宽度 flex-shink = 0
}

注意:用过flex布局后,子元素的float,position都没有效了

flex布局教程参考网址,非常有用:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

时间: 2024-12-11 17:32:31

Flex布局新写法兼容写法详解的相关文章

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

flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持 flex 的浏览器).然而国内很多浏览器对 Flex 的支持都不是很好,这里针对微信内置浏览器写了一套兼容写法.下面入正题. 首先还是从两个版本的语法开始讲吧,这里还是假设flex容器为 .box ,子元素为 .item . 旧语法篇 定义容器的display属性 .box{ display: -moz-box; /*Firefox*/ display: -we

android L新控件RecyclerView详解与DeMo

介绍 在谷歌的官网我们可以看到它是这样介绍的:RecyclerView is a more advanced and flexible version of ListView. This widget is a container for large sets of views that can be recycled and scrolled very efficiently. Use the RecyclerView widget when you have lists with eleme

转:android Support 兼容包详解

本文转自stormzhang的ANDROID SUPPORT兼容包详解 背景 来自于知乎上邀请回答的一个问题Android中AppCompat和Holo的一个问题?, 看来很多人还是对这些兼容包搞不清楚,那么干脆写篇博客吧. Support Library 我们都知道Android一些SDK比较分裂,为此google官方提供了Android Support Library package 系列的包来保证高版本sdk开发的向下兼容性, 所以你可能经常看到v4,v7,v13这些数字,首先我们就来理清

Android SDK中的Support兼容包详解

这篇文章主要介绍了Android SDK中的Support兼容包详解,本文详细区分了Support Library的版本区别.各种Theme的概念和使用注意事项等内容,需要的朋友可以参考下 背景 来自于知乎上邀请回答的一个问题Android中AppCompat和Holo的一个问题?, 看来很多人还是对这些兼容包搞不清楚,那么干脆写篇博客吧. Support Library 我们都知道Android一些SDK比较分裂,为此google官方提供了Android Support Library pac

Hadoop新MapReduce框架Yarn详解

简介 本文介绍了Hadoop自0.23.0版本后新的MapReduce框架(Yarn)原理,优势,运行机制和配置方法等,着重介绍新的yarn框架相对于原框架的差异及改进,并通过Demo示例详细介绍了在新的Yarn框架下搭建和开发Hadoop程序的方法.读者通过本文中新旧Hadoop MapReduce框架的对比,更深刻理解新的yarn框架技术与那里和设计思想,文中的Demo代码经过微小修改既可用于用户基于Hadoop新框架的实际生产环境. Hadoop MapReduceV2(Yarn)框架简介

Hadoop 新 MapReduce 框架 Yarn 详解

原 Hadoop MapReduce 框架的问题 对于业界的大数据存储及分布式处理系统来说,Hadoop 是耳熟能详的卓越开源分布式文件存储及处理框架,对于 Hadoop 框架的介绍在此不再累述,读者可参考 Hadoop 官方简介.使用和学习过老 Hadoop 框架(0.20.0 及之前版本)的同仁应该很熟悉如下的原 MapReduce 框架图: 图 1.Hadoop 原 MapReduce 架构 从上图中可以清楚的看出原 MapReduce 程序的流程及设计思路: 首先用户程序 (JobCli

【转】http-equiv="X-UA-Compatible" 设置IE浏览器兼容模式详解

文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式. 前言 为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE8引入了文件兼容性.在IE6中引入一个增设的兼容性模式,文件兼容性使你能够在IE呈现你的网页时选择特定编译模式.新的IE为了确保网页在未来的版本中都有一支的外观,IE8引入了文件兼容性.当你引入一个增设的兼容性模式,此文章说明文件兼容性的必要性,列出现有版本IE能使用的文件兼容性模式并示范如何选择特

h5新特性 File API详解

之前一直觉得h5的新特性就是一些新标签呢,直到想研究一下图片上传预览的原理,才发现还是有好多新的api的,只是不兼容ie低版本,挺可惜的, File API在表单中文件输入字段基础上,又添加了一些直接访问文件信息的接口.H5在DOM中为文件输入元素添加了一个files集合,在通过表单元素选择了一个或多个文件时,files集合中将包含一组file对象,每个file对象对应一个文件,每个file对象都有下列只读属性: 1.name:本地文件系统的文件名: 2.size:文件的字节大小: 3.type

[C++11新特性] 智能指针详解

动态内存的使用很容易出问题,因为确保在正确的时间释放内存是极为困难的.有时我们会忘记释放内存产生内存泄漏,有时提前释放了内存,再使用指针去引用内存就会报错. 为了更容易(同时也更安全)地使用动态内存,新的标准库提供了两种智能指针类型来管理动态对象.智能指针的行为类似常规指针,区别在于它负责自动释放所指向的对象.这两种智能指针的区别在于管理底层指针的方式:shared_ptr允许多个shared_ptr类型指针指向同一个对象:unique_ptr则"独占"所指向的对象.标准库还定义了一个