今天突然发现flex布局不支持safari  解决办法

.page-wrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-content {
width: %;
}
.main-nav,
.main-sidebar {
-webkit-box-flex: ; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: ; /* OLD - Firefox 19- */
width: %; /* For old syntax, otherwise collapses. */
-webkit-flex: ; /* Chrome */
-ms-flex: ; /* IE 10 */
flex: ; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

感谢http://www.w3cplus.com/css3/using-flexbox.html

苹果safari支持flex布局的更多相关文章

  1. 让iphone5s 支持 flex 布局

    /* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;di ...

  2. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  3. flex布局笔记整理

    flex布局笔记整理 了解-webkit-box 利用postcss进行css代码的向后兼容时,display:flex兼容后的代码常会带有display:-webkit-box. 部分移动端内核较低 ...

  4. IE 11 flex布局兼容性问题 ---- 不支持min-height 和flex:1

    由于最近项目要嵌入其它平台,所以要做IE11 的兼容,那就用IE11打开网页看一看,一看吓一跳,页脚直接到了页眉的下面,并把主要内容覆盖了,也就是stick footer 布局失效了,我写了一个简易的 ...

  5. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  6. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  7. Flex 布局

    Flex 布局     网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非 ...

  8. Flex 布局教程:语法篇[转]

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. Flex布局总结

    2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能.lex布局将成为未来布局 ...

随机推荐

  1. 解决xcode iOS真机调试正常,模拟器失败问题

    今天早上遇到xcode的真机可以调试,但是模拟器却爆出一大堆错,提示错误是没有找到引用的代码文件,真机和模拟器的配置都是一样的, 准确来说,应该是除了指令以外,其他都死一样的配置,所以大概是指令配置上 ...

  2. sphinx 快速使用

    建立配置文件 例可以参照之前的模板新建一个配置文件 sphinx/etc目录 #MySQL数据源配置,详情请查看:http://www.coreseek.cn/products-install/mys ...

  3. 201621123080 《Java程序设计》第10周学习总结

    201621123080 <Java程序设计>第10周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 ...

  4. hive sql 学习笔记

    1.coalesce 语法: COALESCE ( expression [ ,...n ] ) 参数: expression 任何类型的表达式. 返回类型: 返回数据类型优先级最高的 express ...

  5. DeepFaceLab小白入门(1):软件简介!

    简介 DeepFaceLab是一种利用深度学习识别和交换图片和视频中的人脸的工具 这是一个github上的开源项目,所有人都可以查看源代码也能免费使用.个人认为这个项目的最大优点就是安装超级简单,几乎 ...

  6. python里字典的用法介绍

    一.什么是字典 字典是python里的一种数据类型,特点是元素的无序性,和键key的唯一性.字典的创建方法是{key:values},字典里的键key只能是不可变的数据类型(整型,字符串或者是元组), ...

  7. LeetCode(278)First Bad Version

    题目 You are a product manager and currently leading a team to develop a new product. Unfortunately, t ...

  8. kettle-学习参考

    一      关于Kettle Kettle是一款国外开源的ETL工具,纯java编写,数据抽取高效稳定的数据迁移工具.Kettle中有两种脚本文件,transformation和job,transf ...

  9. 排序 sort函数

    sort函数见下表: 函数名 功能描述 sort 对给定区间所有元素进行排序 stable_sort 对给定区间所有元素进行稳定排序 partial_sort 对给定区间所有元素部分排序 partia ...

  10. 【Linux】tcpdump命令详解

    tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析. 它支持针对网络层.协议.主机.网络或端口的过滤,并提供and.or.not等逻辑语句帮你过滤到无用的信息. 实用命令实例 1.普通 ...