今天突然发现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. C#数组简介

    一.数组的定义 数组:是一种包含若干个变量的数据结构,这些变量可以通过索引进行访问. 数组的元素:数组中的变量就称为数组的元素. 元素类型:数组中的元素具有相同的数据类型,该数据类型就称为数组的元素类 ...

  2. C#动态数组ArrayList

    在C#中,如果需要数组的长度和元素的个数随着程序的运行不断改变,就可以使用ArrayList类,该类是一个可以动态增减成员的数组. 一.ArrayList类的常用属性和方法 1. ArrayList类 ...

  3. A. Vitya in the Countryside

    A. Vitya in the Countryside time limit per test 1 second memory limit per test 256 megabytes input s ...

  4. thinkphp5开发restful-api接口学习 教程视频 接口文档

    目录 1. 获取验证码 2. 用户注册 3. 用户登录 4. 用户上传头像 5. 用户修改密码 6. 用户找回密码 7. 用户绑定手机号 8. 用户绑定邮箱 9. 用户绑定用户名(手机/邮箱) 10. ...

  5. Linux学习-仅执行一次的工作排程

    atd 的启动与 at 运作的方式 要使用单一工作排程时,我们的 Linux 系统上面必须要有负责这个排程的服务,那就是 atd 这个玩 意儿. 不过并非所有的 Linux distributions ...

  6. 新线程 handler

    class CalculateThread extends Thread { private Handler handler; @Override public void run() { super. ...

  7. VMware-Ubuntu入门(1)

    大家都说Linux系统是让程序员用起来更有成就感的系统,我也来体验下: 对于小白鼠的我,并没有直接在电脑上重装Linux系统,而是通过VMware工具搭建Ubuntu虚拟linux环境. 首先展示下V ...

  8. [转] babel-present-env 与 babel-polyfill 学习总结

    babelrc 配置文件 { "presets": [ [ "env", { "modules": false, "useBuil ...

  9. apache php 多站点配置 重新整理

    需要下载的东东:apache_2.0.59-win32-x86-no_ssl.msi  (服务器软件,用来编译PHP的) php-5.1.5-Win32.zip  (PHP的主文件) 第一步:1.安装 ...

  10. 解读Loadrunner网页细分图(Web Page Diagnostics)

    [转载的地址]https://www.cnblogs.com/littlecat15/p/9456376.html 一.启用网页细分图 首先在Controller场景设计运行之前,需要在菜单栏中设置D ...